我目前正在使用Mapbox GL JS开发交互式地图。我想在用户点击一个图层时调用一个特定的函数,所以我添加了类似的东西:
map.on('click', function(e) {.....});
并且 :
map.on('click', 'layername', function(e) {.....});
在最后一次Mapbox GL JS更新之前,一切正常。但现在,它有效....但有时但并不总是(有时期,如两天一天)。我见过点击事件监听器(Mapbox GL JS: ignore map click event if marker is clicked)的例子,我不使用。但这是标记;如何使它适用于图层或整个地图? 先感谢您 !
PS:在任何地方都可以找到适合新版本的完整列表吗?因为这不是我唯一的问题...... PS2:请注意,“mouseenter”和“mouseleave”的工作时间非常好。
编辑:这是一段代码:
mapboxgl.accessToken = 'pk.eyJ1IjoiY2xlbWFwYm94IiwiYSI6ImNqOHVsbjdpdDBxM2wyd3JwcnVjZGtsZmsifQ.cv3w8BmCJAy0f0YF1ZFSTA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/clemapbox/cjj5g2pge0huj2sntqmafju85',
});
map.on('click', function (e) {
console.log("click on map");
});
map.on('click', 'RER stops', function(e){
console.log("click on RER stop");
});
map.on('mouseenter', 'RER stops', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'RER stops', function () {
map.getCanvas().style.cursor = '';
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<title>TEST click event</title>
</head>
<body>
<section id='map' style="width:100%;height:500px"></section>
<script src="TEST.js"></script>
</body>
</html>
注意:'RER stop'是放大时带有蓝白“RER”轮的图层。
转移到MapBox GL JS版本0.48为我解决了这个问题!