vue3引入腾讯地图根据接口返回在地图上标点案例
申请key什么的就不说了 直接上代码
1,html
<template>
<div class="table">
<div class="container">
<div id="map"></div>
</div>
</div>
</template>
2.js
import {
onMounted, nextTick, ref } from 'vue';
export default {
name: 'stationLocation',
setup() {
//初始化地图
onMounted(async () => {
await nextTick();
initMap(30.236563, 120.238998);
});
//地图数据
const mapList = ref([
{
lat: 30.18534, lng: 120.26457, id: 'demo', styleId: 'marker', category: 1, categoryName: '213', status: 1 },
{
lat: 30.236563, lng: 120.238998, id: 'demo', styleId: 'marker', category: 1, categoryName: '213', status: 1 },
{
lat: 30.237635, lng: 120.233312, id: 'demo', styleId: 'marker', category: 1, categoryName: '213', status: 1 },
]);
//地图模块信息
const map = ref(null);
const markerLayer = ref(null);
const infoWin = ref(null);
//处理地图数据
const hanleMarker = () => {
let myMarkers = [];
mapList.value.map((item, index) => {
let obj = {
id: item.id,
styleId: 'marker' + item.category,
position: new TMap.LatLng(item.lat * 1, item.lng * 1),
properties: {
title: `${
item.categoryName}`,
status: item.status,
},
};
myMarkers.push(obj);
});
return myMarkers;
};
//初始化地图
const initMap = (lat, lng) => {
const center = new TMap.LatLng(lat, lng);
map.value = new TMap.Map(document.getElementById('map'), {
center: center,
zoom: 12,
});
markerLayer.value = new TMap.MultiMarker({
id: 'marker-layer', //图层id
map: map.value,
styles: {
marker: new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: {
x: 16, y: 32 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png',
}),
},
geometries: hanleMarker(),
});
//标点点击事件
markerLayer.value.on('click', event => {
let {
lat, lng } = event.latLng;
let {
title, status } = event.geometry.properties;
initWindow(lat, lng, title, status);
infoWin.value.open();
});
};
// 初始化一个信息窗口
const initWindow = (lat, lng, title, status) => {
if (infoWin.value) {
closeWindow();
}
infoWin.value = new TMap.InfoWindow({
map: map.value,
position: new TMap.LatLng(lat, lng),
content: `<ul class="equipment">
<li>点位名称:<span>${
title}</span></li>
<li>详细地址:<span>${
title}</span></li>
<li>管理员:<span>${
title}</span></li>
</ul>`,
offset: {
x: 0, y: -30 },
});
// // 信息窗口关闭回调
// infoWin.value.on("closeclick", () => {
// // ...
// });
};
const closeWindow = () => {
if (infoWin.value) {
infoWin.value.close();
}
};
},
};
3.css
.equipment {
padding: 20px;
}
#map {
width: 100%;
height: 800px;
margin-top: 20px;
}