因此mapbox.js
存在问题,我无法在自定义onclick
中附加popUp
个事件。
我正在做的是,我有一个自定义worpdress
mapbox.js
小部件,我正在动态添加自定义标记,标题和说明等。
我希望在标记的onclick
属性中包含'description:'
个事件。
我知道我创建mapbox.js
脚本的方式是一种不好的做法,但我需要一个快速的解决方案。
所以这是一个创建php
的{{1}}脚本。
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
我尝试使用Jquery访问它,但它只是无法识别function
有div
,但我可以将.book-now
附加到onclick
但不适用于在其中创建的.leaflet-popup-content
。
我只是想知道我是否需要找到解决此问题的不同方法,或者有一种我不知道的快速方法。
另外,我确实尝试在html
内创建onclick
事件,但由于某种原因它无效。
答案 0 :(得分:1)
L.mapbox.featureLayer
类的默认清理程序方法将删除JavaScript,因为在广泛的情况下,它是潜在的安全威胁。要修复此示例,您需要停用清理功能。
您的代码所在的位置
}).addTo(map);
你要写
}, { sanitizer: function(x) { return x; } }).addTo(map);