1. 在data属性中定义layerGroup、map变量
data() {
return {
layerGroup : null,
map : null,
};
},
2. 在地图上显示marker
drawWaterStMarker(arr){
// 如果地图没有加载完毕,则返回
if(!this.map){
return;
}
// 清空地图上已存在的站点
if(this.layerGroup !== null){
this.layerGroup.clearLayers();
}
// 如果站点数据为空则返回
if(arr.length === 0){
return;
}
const layers = [];
for (let item of arr) {
if(item.lgtd && item.lttd){
let imgSrc = 'market.jpg';
let str = `<p class="mapLetter">${item.name}</p>`;
var myIcon = L.divIcon({
iconSize: [32, 32],
iconAnchor: [16, 32],
html: `<div><img src="${imgSrc}"/>${str}</div>`
});
let marker = L.marker([item.lttd, item.lgtd], {
icon: myIcon
});
// 地图marker添加点击事件
marker.on(`click`, () => {
this.handleMapMarerClick(item);
});
layers.push(marker);
}
}
// 在此对layerGroup赋值
this.layerGroup = L.layerGroup(layers);
this.map.addLayer(this.layerGroup);
},
‘’
3. 清空地图上的marker
clearMarker(){
if(this.layerGroup !== null){
this.layerGroup.clearLayers();
}
}