网上找半天去不了Marker标签,去腾讯地图官网查,结果marker.setMap()以及maker的其它方法报错。可能是因为Vue组件和腾讯地图插件冲突,所以要解决这个问题很简单,亲测有效。
<script>
let marker, map, infoWindow;
export default {
name: "aa",
data:{},
methods:{
}
}
</script>
将自定义的marker,map,infoWindow移出Vue,设置为全局变量即可。以下是我根据点击地图重新设置标签位置,如果需要移除直接使用marker.setMap(null)。
getMarker(item) {
//marker和infowindow不为空则重新设置他们的坐标
if (marker != null && infoWindow != null) {
marker.updateGeometries({
"id": 'demo1',
"styleId": 'marker',
"position": new TMap.LatLng(item.location.lat, item.location.lng),
"properties": {
"title": item.title,
"address": "",
}
})
infoWindow.close()
infoWindow.position = new TMap.LatLng(item.location.lat, item.location.lng)
infoWindow.content = `<div style="white-space:
nowrap;color:#000;text-align:center;">
<p style="font-size:10px;">${item.title}</p>
</div>`
} else {
//marker 和 InfoWindow为空则创建标点和信息框
marker = new TMap.MultiMarker({
id: 'marker-layer',
map: map,
styles: {
// mark样式
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 38,
"anchor": {x: 12, y: 32},
})
},
geometries: [{
"id": 'demo1',
"styleId": 'marker',
"position": new TMap.LatLng(item.location.lat, item.location.lng),
"properties": {
"title": item.title,
"address": "",
}
}]
});
}
//初始化infoWindow
infoWindow = new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(item.location.lat, item.location.lng),
offset: {x: 0, y: -32}, //设置信息窗相对position偏移像素,为了使其显示在Marker的上方
content: `<div style="white-space:
nowrap;color:#000;text-align:center;">
<p style="font-size:10px;">${item.title}</p>
</div>`
});
marker.on("click", () => {
infoWindow.open()
})
}
这样使用腾讯地图API不会报方法找不到的问题,具体需求还是得看腾讯地图API,如果有更好的方法解决vue和腾讯地图的整合问题,希望告知,谢谢。