1、vue项目index.html引入地图js
2、页面使用
<script setup lang="ts">
import { useMapStore } from '/@/store';defineOptions({ name: 'PageMap' });
const emits = defineEmits(['update:area', 'update:address', 'update:latitude', 'update:longitude']);
const props = defineProps({area: { type: Array, default: () => [] },address: { type: String, default: '' },latitude: { type: [String, Number], default: '' },longitude: { type: [String, Number], default: '' },
});
const useMap = useMapStore();
const { location } = storeToRefs(useMap);
const position = new TMap.LatLng(location.value.lat, location.value.lng);
const initMap = async () => {// const TMap = (window as any).TMap;window.map = null;window.markerLayer = null;window.infoWindow = null;const center = new TMap.LatLng(location.value.lat, location.value.lng); //定义map变量，调用 TMap.Map() 构造函数创建地图const dom = document.getElementById('ref_map');window.map = new TMap.Map(dom, {center, //设置地图中心点坐标zoom: 16, //设置地图缩放级别rotation: 45, //设置地图旋转角度});window.infoWindow = new TMap.InfoWindow({map: window.map,position,offset: { x: 0, y: -40 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方content:'<div class="map el-popper is-light el-popover el-popover--plain" style="z-index: 2070; position: absolute; padding: 0">\n' +'\t\t\t<div class="font-bold p-2 border-b">测试标题</div>\n' +'\t\t\t<div class="pl-3 pr-3 pb-4 pt-2 text-sm">\n' +'\t\t\t\t<div><span>联系人：</span><span>张三</span></div>\n' +'\t\t\t\t<div><span>电话：</span><span>187****2342</span></div>\n' +'\t\t\t</div>\n' +'\t\t\t<span class="el-popper__arrow" style="position: absolute; left: calc(50% - 5px); bottom: -5px"></span>\n' +'\t\t</div>',enableCustom: true,});window.infoWindow.close();updateLayer(position);
};
// 更新定位点
const updateLayer = (position: any) => {const layer = {id: '4',position,styleId: 'myStyle',properties: {//自定义属性title: 'marker1',},};if (window.markerLayer != null) window.markerLayer.updateGeometries([layer]);else {window.markerLayer = new TMap.MultiMarker({map: window.map,geometries: [layer],styles: {//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）myStyle: new TMap.MarkerStyle({width: 50, // 点标记样式宽度（像素）height: 50, // 点标记样式高度（像素）src: '/images/emergency-location.png', //图片路径//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点anchor: { x: 25, y: 32 },enableRelativeScale: true, // 是否开启相对缩放relativeScaleOptions: {scaleZoom: 15, // 设置marker图片宽高像素单位与zoom级别的瓦片像素相同的层级 如当设置为18时，zoom小于18marker会被缩小直至达到minScale设置的最小缩放倍数，大于时marker直至达到maxScale设置的最大缩放倍数；enableRelativeScale为true时生效，默认18minScale: 0.2, // 设置marker最小缩放倍数，enableRelativeScale为true时生效，默认0.5maxScale: 1, // 设置marker最大缩放倍数，enableRelativeScale为true时生效，默认1},}),},});window.markerLayer.on('click', clickMarkerHandler);}
};
const clickMarkerHandler = (evt) => {console.log(evt);window.infoWindow.open(); //打开信息窗window.infoWindow.setPosition(evt.geometry.position); //设置信息窗位置// window.infoWindow.setContent(evt.geometry.position.toString()); //设置信息窗内容
};
onUnmounted(() => {window.markerLayer?.off('click', clickMarkerHandler);// window.map.
});
onMounted(() => {nextTick(() => {setTimeout(() => initMap(), 500);});
});
</script><template><div class="p-4 h-full w-full flex"><div id="ref_map" ref="refMap" style="height: 99%; width: 100%" /></div>
</template>
<style>
.map.el-popper.is-light > .el-popper__arrow:before {border: 0 !important;
}
</style>
3、实际效果, 弹框样式直接使用element的
