时间戳

首页 > 解决方案 > 图层上的mapbox gl js单击事件

javascript - 图层上的mapbox gl js单击事件

问题描述

我目前正在使用 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”轮的图层。

标签： javascriptmapboxmapbox-gl-js

解决方案

迁移到 MapBox GL JS 版本 0.48 为我解决了这个问题！

推荐阅读