Question

我目前正在使用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停止”是一个放大时带有蓝色和白色“ RER”圆角的层。

Answer 1

移至MapBox GL JS 0.48版对我来说解决了这个问题！

mapbox gl js click事件在图层上

1 个答案: