leaflet添加Marker和文字标注_leaflet添加文字

vue+leaflet添加Marker和文字标注

功能说明
1.把点以marker的形式添加到地图上，并把文字标注到marker中间
2.击marker可以查看点的详情或者跳转到详情页面
功能实现
制作Marker图片
首先制作背景透明的Marker图片，样式自己定义

添加Marker附带属性信息

初始化Icon

let icon= L.icon({
      iconUrl: require('../../assets/imgs/realTime/green.png'),//marker图片地址
      iconSize: [57, 71],//marker宽高
      iconAnchor: [28.5, 71]//marker中心点位置
    });```

Marker添加到地图上

1
2
3
4
5
6
7
8

let marker = L.marker(latlng, { icon: icon,data:dt }).addTo(map);//dt是点的属性信息 对象格式

添加文字标注## 标题

1
2
3

let markerIcon = L.divIcon({
html: content,//marker标注
className: ‘my-div-icon’,
iconSize: type == [57, 71],//marker宽高
iconAnchor: type == [28.5, 55]//文字标注相对位置
});
L.marker(latlng, { icon: markerIcon }).addTo(map);

**绑定点击事件获取属性信息**

1
2

marker.on('click', e => {
    let data=e.target.options.data;//marker的属性信息
});
1
2
3

参考链接