Mapbox GL JS：如果单击标记，则忽略地图单击事件
Posted
技术标签:
【中文标题】Mapbox GL JS：如果单击标记，则忽略地图单击事件【英文标题】：Mapbox GL JS: ignore map click event if marker is clicked 【发布时间】：2017-12-31 01:53:58 【问题描述】：我在地图上有一个标记。我想在点击它时改变它的状态，并在点击地图上的其他地方时改变它。
问题是map.on("click", console.log) 在单击标记时也会被触发。
我只想查看标记点击事件，因为地图点击会调用状态回滚。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body margin:0; padding:0;
#map position:absolute; top:0; bottom:0; width:100%;
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'access token';
var map = new mapboxgl.Map(
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
);
var el = document.createElement('div');
el.style.backgroundImage = 'url(https://placekitten.com/g/40/40/)';
el.style.width = 40 + 'px';
el.style.height = 40 + 'px';
new mapboxgl.Marker(el)
.setLngLat([ -63.29223632812499, -18.28151823530889 ])
.addTo(map);
el.addEventListener('click', console.log);
map.on('click', console.log);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您可能想使用map.once() 或map.off()，请参阅：Double on click event with mapbox gl
【讨论】：
我可能会在不同的情况下使用它，目前，.stopPropagation() 似乎是最佳选择。【参考方案2】：我认为您想要做的是在用户单击标记时阻止事件被处理两次。为此，您可以使用event.stopPropagation();
见：https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
在您的代码中，您可以像这样使用它：
function handleKitten(e)
e.target.style.backgroundImage = 'url(http://placekitten.com/g/50/50)';
e.stopPropagation();
function handleMapClick(e)
console.log('handleMapClick', e);
var map = new mapboxgl.Map(
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
);
var el = document.createElement('div');
el.style.backgroundImage = 'url(https://placekitten.com/g/40/40/)';
el.style.width = 40 + 'px';
el.style.height = 40 + 'px';
new mapboxgl.Marker(el)
.setLngLat([ -63.29223632812499, -18.28151823530889 ])
.addTo(map);
el.addEventListener('click', handleKitten, false);
map.on('click', handleMapClick);我做了一个快速的 jsfiddle 来演示： https://jsfiddle.net/andi_lo/guzskv7n/7/
【讨论】：
以上是关于Mapbox GL JS：如果单击标记，则忽略地图单击事件的主要内容，如果未能解决你的问题，请参考以下文章
如何在 mapbox-gl-js 的标记上添加“点击”侦听器