地图框.js无法将点击事件附加到弹出内容

Mapbox.js Cannot attach an onclick event to a popUp content

本文关键字:事件 js 地图      更新时间:2023-09-26

所以我对mapbox.js有问题,我无法在自定义popUp中附加onclick事件。

正在做的是,我有一个自定义worpdress mapbox.js小部件,我正在动态添加自定义标记,标题和描述等。

我想在标记的属性'description:'有一个onclick事件。

我知道我创建mapbox.js脚本的方式是一种不好的做法,但我需要一个快速的解决方案。

所以这里有一个php脚本 创建一个 javascript .

<?php
$pins = $instance['pinpoint'];
$pinsnumber;
$j = 0;
for ($i=0;$i<count($pins);$i++) {
    $pinsnumber++;
} 
?>
<div id="map-holder">
    <div id='map'></div>
</div>
<script>
    <?php $token = $instance['token'];
          $latitude = $instance['latitude'];
          $longitude = $instance['longitude'];
          $zoom = $instance['zoom'];
          $style = $instance['style'];
    ?>
     L.mapbox.accessToken = <?php echo "'$token'";?>;
    var map = L.mapbox.map('map')
    .setView([<?php echo $latitude?>, <?php echo $longitude ?>], <?php echo $zoom?>);
    // Use styleLayer to add a Mapbox style created in Mapbox Studio
    L.mapbox.styleLayer(<?php echo "'$style'"; ?>).addTo(map);
    var features = [];
    var myLayer = L.mapbox.featureLayer(
    {
        type: 'FeatureCollection',
        features: [
        <?php 
            for($j;$j<$pinsnumber;$j++) {
                    echo "{
                type: 'Feature',
                properties: {
                    'marker-color': '#003460',
                    'marker-size': 'large',
                    'marker-symbol': 'circle',
                    'description': '<div class='"img'"><img src=" . $instance['pinpoint'][$j]['image'] . " width='"225'" height='"110'"></img></div><div class='"title-popup'"><h5>" . $instance['pinpoint'][$j]['title'] . "</h5><p>" . $instance['pinpoint'][$j]['descr'] . "</p></div><div class='"book-now btnBook'" onclick='"console.log('"Hello'")'"><a href='"" . $instance['pinpoint'][$j]['book'] . "'" target='"_blank'">Book Now ></a></div>'
                },geometry: {
                    type: 'Point',
                    coordinates: [" . $instance['pinpoint'][$j]['lat'] . "," . $instance['pinpoint'][$j]['long'] . "]
                }";
                if ($j===$pinsnumber-1)
                {
                    echo "}";
                }
                else {
                    echo "},";
                }

            }
            echo "]";
        ?> 
        }).addTo(map);  
    map.scrollWheelZoom.disable();
</script>

因此,输出将是一系列功能。

我想要的是当用户单击.book now我可以触发function

我尝试使用 Jquery 访问它,但它只是无法识别有一个带有.book-nowdiv,但我可以将onclick附加到.leaflet-popup-content,但不能附加到其中创建的html

只是想知道我是否需要找到一种不同的方法来解决这个问题,或者有一种我不知道的快速方法。

另外,我确实尝试在'description:'内创建一个onclick事件,但由于某种原因它不起作用。

L.mapbox.featureLayer类的默认清理器方法将删除 JavaScript,因为在广义情况下,这是一个潜在的安全威胁。若要修复此示例,请禁用清理。

你的代码在哪里说

    }).addTo(map); 

你会写

    }, { sanitizer: function(x) { return x; } }).addTo(map);