如何根据其弹出信息验证被点击的Leaflet Marker是否是我想要的?
How to verify the Leaflet Marker being clicked is the one I want based on its popup information?
在传单中,我的一些标记是这样构建的;
$div1 = "<div class='xx'>OBJ: $objmrkr<br></div><div class='gg'>W3W: $w3w</div>"; //echo "$div1<br>";
$div2 = "<div class='cc'>Comment:<br>$comment</div>"; //echo "$div2<br>";
$div3 = "<div class='bb'><br>Cross Roads:<br>$cr</div><br><div class='gg'>$row[lat],$row[lng]<br>Grid: $gs<br><br>Captured:<br>$row[timestamp]</div>"; //echo "$div3<br>";
$objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
rotationAngle: $dup,
rotationOrigin: 'bottom',
opacity: 0.75,
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();
$('Objects'._icon).addClass('objmrkr');
";
};
当右键单击 circleKoords 函数时被调用,但在它的代码是 运行 之前我需要知道我是否有正确的标记。正确的标记在标题中有一个 'OBJ:',如示例所示。这似乎是一种笨拙的方法,但我不知道另一种方法。我的问题是如何验证 'OBJ:' 是否在此标记的弹出窗口中?
SO 上有许多类似的问题,但其中 none 似乎有效,我不确定是不是因为我使用的是上下文菜单或其他东西。
我试过了;
var imanobj = e.xx 之类的东西,但似乎没有得到我需要的东西?
想法?
您需要获取(标记的)弹出窗口的内容marker.getPopup().getContent()
,然后您可以使用content.indexOf("OBJ") > -1
检查它是否包含该字符串。
marker.on('contextmenu',(e)=>{
var marker = e.target;
if(marker.getPopup()){
var popup = marker.getPopup();
if(popup.getContent().indexOf("OBJ") > -1){
alert('Clicked Marker has OBJ')
}
}
})
https://jsfiddle.net/falkedesign/54hoaerx/
设置OBJ
标志的其他方法:
如果你想知道标记是否是OBJ-Marker
,你可以简单地添加一个属性标志。 $objmrkr.objFlag = true;
$objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
rotationAngle: $dup,
rotationOrigin: 'bottom',
opacity: 0.75,
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();
$('Objects'._icon).addClass('objmrkr');
$objmrkr.objFlag = true;
";
marker.on('contextmenu',(e)=>{
var marker = e.target;
if(marker.objFlag){
alert('Clicked Marker is a OBJ-Marker')
}
})
监听器在php字符串中的实现:
(我没有检查是否有任何php错误)
$objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
rotationAngle: $dup,
rotationOrigin: 'bottom',
opacity: 0.75,
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();
$('Objects'._icon).addClass('objmrkr');
$objmrkr.on('contextmenu',function(e){
var marker = e.target;
if(marker.getPopup()){
var popup = marker.getPopup();
if(popup.getContent().indexOf('OBJ') > -1){
alert('Clicked Marker has OBJ')
}
}
})";
在传单中,我的一些标记是这样构建的;
$div1 = "<div class='xx'>OBJ: $objmrkr<br></div><div class='gg'>W3W: $w3w</div>"; //echo "$div1<br>";
$div2 = "<div class='cc'>Comment:<br>$comment</div>"; //echo "$div2<br>";
$div3 = "<div class='bb'><br>Cross Roads:<br>$cr</div><br><div class='gg'>$row[lat],$row[lng]<br>Grid: $gs<br><br>Captured:<br>$row[timestamp]</div>"; //echo "$div3<br>";
$objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
rotationAngle: $dup,
rotationOrigin: 'bottom',
opacity: 0.75,
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();
$('Objects'._icon).addClass('objmrkr');
";
};
当右键单击 circleKoords 函数时被调用,但在它的代码是 运行 之前我需要知道我是否有正确的标记。正确的标记在标题中有一个 'OBJ:',如示例所示。这似乎是一种笨拙的方法,但我不知道另一种方法。我的问题是如何验证 'OBJ:' 是否在此标记的弹出窗口中? SO 上有许多类似的问题,但其中 none 似乎有效,我不确定是不是因为我使用的是上下文菜单或其他东西。 我试过了; var imanobj = e.xx 之类的东西,但似乎没有得到我需要的东西? 想法?
您需要获取(标记的)弹出窗口的内容marker.getPopup().getContent()
,然后您可以使用content.indexOf("OBJ") > -1
检查它是否包含该字符串。
marker.on('contextmenu',(e)=>{
var marker = e.target;
if(marker.getPopup()){
var popup = marker.getPopup();
if(popup.getContent().indexOf("OBJ") > -1){
alert('Clicked Marker has OBJ')
}
}
})
https://jsfiddle.net/falkedesign/54hoaerx/
设置OBJ
标志的其他方法:
如果你想知道标记是否是OBJ-Marker
,你可以简单地添加一个属性标志。 $objmrkr.objFlag = true;
$objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
rotationAngle: $dup,
rotationOrigin: 'bottom',
opacity: 0.75,
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();
$('Objects'._icon).addClass('objmrkr');
$objmrkr.objFlag = true;
";
marker.on('contextmenu',(e)=>{
var marker = e.target;
if(marker.objFlag){
alert('Clicked Marker is a OBJ-Marker')
}
})
监听器在php字符串中的实现:
(我没有检查是否有任何php错误)
$objMarkers .= " var $objmrkr = new L.marker(new L.LatLng($row[lat],$row[lng]),{
rotationAngle: $dup,
rotationOrigin: 'bottom',
opacity: 0.75,
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles',callback: circleKoords}],
icon: L.icon({iconUrl: '$markername', iconSize: [32, 34]}),
title:`marker_$markNO`}).addTo(fg).bindPopup(`$div1<br>$div2<br>$div3`).openPopup();
$('Objects'._icon).addClass('objmrkr');
$objmrkr.on('contextmenu',function(e){
var marker = e.target;
if(marker.getPopup()){
var popup = marker.getPopup();
if(popup.getContent().indexOf('OBJ') > -1){
alert('Clicked Marker has OBJ')
}
}
})";