leaflet添加Marker和文字标注

vue+leaflet添加Marker和文字标注

功能说明

  1. 把点以marker的形式添加到地图上,并把文字标注到marker中间
  2. 击marker可以查看点的详情或者跳转到详情页面

功能截图

image-20200401093000701

功能实现

制作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添加到地图上

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

添加文字标注

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);

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

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

You may also like...


Warning: Division by zero in /var/www/html/giserdqy/wp-includes/comment-template.php on line 1457

发表评论