leaflet地图的popup冒泡替换setContent原生代码，popup自定义内容

事件setContent

在官网上的leaflet冒泡popup里，内容里都是用原生代码加进去,如果只是简单的显示用原生的很好写，没问题。但是一旦涉及到如果popub要显示复杂的内容，那就很麻烦了，js都得写半天还不一定能一次成功。

解决办法

在vue里像平常一样定义div，然后给个id。我们用document.getElementById去获取节点。（html同理）

示例

首先正常的初始化地图我就不说了，官网或百度例子很多。

//准备popub显示的内容
<div id="searchZuankongDetail">
            <el-button type="primary">设置</el-button>
            <span id="zkDcmsClick">地层描述</span>
  </div>


//在init好地图后，要实现popub首先要新加入一个图层
data(){
  return{
    ...
    mapObj:{
      markerLayer :null,
      popupObj:null  //popup对象
    }
  }
}
//在mounted里做赋值节点
 mounted(){
     this.targetele = document.getElementById('searchZuankongDetail');
   },


//methods 事件里面  写在初始化initMap里 在初始化地图时也同时先新建好图层
//这里的markerLayer 仅仅是我的标记图层
this.mapObj.markerLayer = new L.FeatureGroup();
this.mapObj.map.addLayer(this.mapObj.markerLayer);
//冒泡准备
this.mapObj.popupObj = L.popup({ minWidth: 312, autoClose: false })


//在某个要点击或者mouse事件里 （maker事件这里没写，仅写popup事件）
 var popupContent =  this.targetele;
 //实现
 var popup = L.popup().setLatLng([latlng.lat,latlng.lng]).setContent(popupContent ).openOn(_this.mapObj.map);

效果