方案一:
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]);
},