【问题标题】:How to verify the Leaflet Marker being clicked is the one I want based on its popup information?如何根据弹出信息验证被点击的传单标记是我想要的?
【发布时间】:2021-04-23 23:20:05
【问题描述】:

在传单中,我的一些标记是这样构建的;

$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 有许多类似的问题,但它们似乎都不起作用,我不确定是不是因为我正在使用 contextmenu 或其他东西。 我试过了; var imanobj = e.xx 之类的东西,但似乎没有得到我需要的东西? 想法?

【问题讨论】:

    标签: jquery leaflet


    【解决方案1】:

    您需要获取(标记的)弹出窗口的内容marker.getPopup().getContent(),然后您可以使用content.indexOf("OBJ") &gt; -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')
                    }
                }
            })";
    

    【讨论】:

    • 我喜欢这个答案的简单性。我只需要弄清楚如何使用您提供的marker.on。
    • 只需要在php字符串中添加marker.on代码即可。并且您需要将变量名称marker 更改为$objmrkr。我更新了答案给你看
    • 我用您的代码替换了我的代码,但不幸的是我收到了“文件结尾错误”。对我来说,这通常意味着我错过了一个勾号、逗号或括号等,所以我搜索了它,但没有找到任何东西。因此,我阅读并重新阅读了您关于将变量标记更改为 $objmrkr 的评论更改了结尾说; "$objmrker.on('context menu',(e)=>{...." 但结尾是;解析错误:语法错误,/var/www/html/objMarkers 中的意外 '=>' (T_DOUBLE_ARROW) .php 在第 106 行"。你可以看到我正在努力解决语法问题。我不确定最后一部分是在 '};' 之后还是在两者给出相同结果之前
    • 一个更快速的问题。我在您的代码中设置了一个变量“var isOBJ = 1”。但是当我在另一个函数中对其进行测试时,console.log 会显示“找不到变量 isOBJ”。我该怎么做?
    • 你能分享你的代码吗?例如通过 jsfiddle.net
    猜你喜欢
    • 2019-05-28
    • 1970-01-01
    • 2018-12-23
    • 1970-01-01
    • 1970-01-01
    • 2017-09-10
    • 2019-12-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多