leaflet 添加marker，popup，tooltip

本章主要介绍在vue中使用leaflet 添加marker，弹窗，以及提示框。

leaflet 详解总目录：传送

一、添加marker

 L.marker([29.4785541, 119.55847441],{
        title:'我是marker',//鼠标悬停，会出现tooltip文本提示
        riseOnHover:true,//默认false，设为true，则maker会在鼠标悬停时，出现在其他marker之上
        draggable:true,//默认false，设为true，则marker可以被拖拽
        autoPan:true,//默认false，设为true，则maker拖拽过程中，触及地图边界，地图会平移，
        interactive:true,//默认trur，设为false，该marker会作为底图添加在地图中，无法触发marker事件
        opacity:0.5,//图标透明度
      }).addTo(this.map)

maker默认是蓝色的图标，也可以自定义图标

1、自定义Icon图标

let icon = L.icon({
        iconUrl:require('../assets/logo.png'),//自定义图标地址
        iconSize:[80,80],//图标的尺寸
        iconAnchor:[40,80],//图标坐标点偏移设置
      })
      L.marker([29.4785541, 119.58847441],{
        icon:icon
      }).addTo(this.map)

iconAnchor：设置图标坐标点，不清楚的可以参考问题3

 2、自定义DivIcon图标

let divIcon = L.divIcon({
        html: '<div class="div_icon">我是divIcon</div>',
        className: "html_div",
      });
      L.marker([29.4985541, 119.58847441], {
        icon: divIcon,
      }).addTo(this.map);

 divIcon 继承 icon ，所以divIcon拥有icon所有属性，可以根据class修改maker样式

效果如下：

 marker还有其他很多属性和方法，大家可以查看文档学习：Marker

二、添加popup

let popup = L.popup({
        keepInView:true,//是否关闭页面同时关闭弹窗
        closeButton:false,//是否显示关闭按钮
      }).setContent('<div class="div_icon">我是popup</div>')
      let that = this
      that.map.on('click',(e) =>{
        popup.setLatLng(e.latlng).openOn(that.map)
      })
      let popup1 = L.popup({
        keepInView:true,//是否关闭页面同时关闭弹窗
        closeButton:false,//是否显示关闭按钮
      }).setContent('<div class="div_icon">我是popup1</div>')
      L.marker([29.4985541, 119.52847441]).bindPopup(popup1).addTo(this.map);

第一种是添加popup在地图中，可以提前设置固定位置，也可以后期重新设置，第二种是把popup绑定在marker上，点击marker弹窗。

三、添加tooltip

let tooltip = L.tooltip({
        direction:'auto',//工具提示框弹出位置
        permanent:false,//是否永久打开，默认为false，只有在鼠标移动时打开
        sticky:false,//工具框是否随着鼠标移动
        opacity:1,//透明度
      }).setContent('<div class="div_icon">我是tooltip</div>')
      let that = this
      that.map.on('click',(e) =>{
        tooltip.setLatLng(e.latlng).openOn(that.map)
      })
      let tooltip1 = L.tooltip({
        direction:'auto',//工具提示框弹出位置
        permanent:false,//是否永久打开，默认为false，只有在鼠标移动时打开
        sticky:false,//工具框是否随着鼠标移动
        opacity:1,//透明度
      }).setContent('<div class="div_icon">我是tooltip1</div>')
      L.marker([29.5985541, 119.52847441]).bindTooltip(tooltip1).addTo(this.map);

tooltip是继承popup，tooltip和popup基本上操作是一致的

效果如下：

以上是添加marker，popup和tooltip的简单实现方法，万变不离其宗，即便有复杂的需求，也可以根据各种属性来实现。

 关于marker，popup，tooltip的更多属性和方法，大家可以到官网自行查看，学习：Marker