leaflet 弹窗里添加点击事件

方案一：

1、在每个marker的popup里添加相同class "detail-button" id（marker的id）不同的元素

2、监听map 的popup open事件

3、找到所绑定的detail-button元素

4、为该deail-button元素添加事件，点击即可获取marker所设置的id

 //添加点marker
    addEventMarker(row){
       if(this.eventMark ){
      //移除上一个事件mark
         this.eventMark.remove()
          this.eventMark = null;
      }
       var latlng = L.latLng(row.latY,row.lonX);
               var eventMarker = L.marker(latlng, {
                  // name:{hh:'ssss'},
                    icon: L.icon({
                        iconUrl: require(`@analyze/assets/img/map_icons/mark.png`),
                        iconSize: [25, 25],
                        iconAnchor: [10, 10],
                        tooltipAnchor: [0, -15]
                    })
                });
              eventMarker.addTo(this.map);
       this.map.setZoom(13);
      this.map.setView(latlng);
    this.eventMark = eventMarker;
     eventMarker.on('click',(e)=>{
                  var popup = L.popup();
    popup.setLatLng(e.latlng).setContent(`<div id="event-popup">
    <div><span>${row.accidentSort==1?"事故单位":"事件单位"}:</span>${row.accidentUnitName}</div>
<div class="popup-detail"><span class="detail-button" id="hahah">
详情>><span></div></div>`,{className:'event-popup'}).openOn(this.map);
            });

        this.map.on("popupopen",(ev1)=>{
            let popupEle = ev1.popup.getElement();
            let ss = popupEle.querySelector('.detail-button');
            let id=ss.getAttribute("id");
            ss.addEventListener("click",(ev)=>{
                console.log(this,`选中的是${id }`);
            })
        });
    },

方案二：

1、在created活mounted中把方法挂载到window，window.funName(按钮调用的方法名) = this.funName(vue方法名)，

2、在绑定popup的时候，直接使用 `<a οnclick='funName()'>`

vue 方案三：

适用于popup里面的操作及内容比较复杂的场景。

1、封装一个vue的组件popupContent，用来展示popup内容。

2、页面中正常引入该组件,popup绑定id为"mapDialog-container"的元素

3、创建 Profile 实例，并挂载到该元素上。

 let Profile =  Vue.extend(popupContent);
 // 创建 Profile 实例，并挂载到一个元素上。
  new Profile({ propsData: { popupData: {key,warehouse_id,code,unitCode,deptCode} } }).$mount('#mapDialog-container')

其中propsData为要传入到popup-content的数据

4、在popup里监听popuData，处理自己的操作就可以了

 addPoint(key,iconImg,data=[]) {
          let that = this;
         
         if(!that.showLayerData[key]||!that.showLayerData[key]){
           return;
         }
            for (var i = 0; i < that.showLayerData[key].length; i++) {

                var latlng = L.latLng(that.showLayerData[key][i].lat_y,that.showLayerData[key][i].lon_x);
                // that.map.setView(latlng);
               var marker = L.marker(latlng, {
                  // name:{hh:'ssss'},
                    icon: L.icon({
                        iconUrl: require(`../../assets/img/map_icons/${iconImg}`),
                        iconSize: [24, 24],
                        iconAnchor: [10, 10],
                        tooltipAnchor: [0, -15]
                    })
                });
                marker.bindTooltip(`${that.showLayerData[key][i].name}`).openTooltip();
                 marker.key=key;
                marker.code=that.showLayerData[key][i].id;
               marker.warehouse_id=that.showLayerData[key][i].warehouse_id;
              marker.unitCode= that.showLayerData[key][i].unit_code;
              marker.deptCode= that.showLayerData[key][i].dept_code;
            that.markArray[key].push(marker);
                // marker.bindPopup(`<div id="mapDialog-container"></div>`,{ className: 'layer-popup' }).openPopup();
                //  marker.setContent(`<div id="mapDialog-container" style="width:500px"></div>`).openPopup();
            marker.on('click',function(ev){
           
             let key = ev.sourceTarget.key;
             let code =  ev.sourceTarget.code;
                let warehouse_id = ev.sourceTarget.warehouse_id;
                let unitCode = ev.sourceTarget.unitCode;
                let deptCode = ev.sourceTarget.deptCode;

                  var popup = L.popup({className:'layer-popup'});
    popup.setLatLng(ev.latlng).setContent('<div id="mapDialog-container" style="min-width:450px"></div>').openOn(that.map); 
    
    let Profile =  Vue.extend(popupContent);
 // 创建 Profile 实例，并挂载到一个元素上。
  new Profile({ propsData: { popupData: {key,warehouse_id,code,unitCode,deptCode} } }).$mount('#mapDialog-container')
    // mymap.on('click', onMapClick);              
            })
               //展示点
               that.featureGroup[key] = L.featureGroup(that.markArray[key])
               that.markers.addLayer(that.featureGroup[key]);
        },