Mapbox GL JS：如果单击标记，则忽略地图点击事件 [英] Mapbox GL JS: ignore map click event if marker is clicked
问题描述
我在地图上有一个标记。我想在点击它时更改其状态，并在点击地图上的其他位置时将其更改回来。
I have a marker in the map. I want to change its state when it is clicked and change it back when other place on the map is clicked.
问题是地图。 on（click，console.log）也会在点击标记时触发。
The problem is that map.on("click", console.log) is also fired upon clicking the marker.
我想只看到标记点击事件，因为地图点击会调用状态回滚。
I want to see only the marker clicked event, because map click invokes state rollback.
<!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>
推荐答案
我想你想做的就是停止活动当用户点击标记时，处理两次。要做到这一点，你可以使用 event.stopPropagation（）;
I think what you wanna do is to stop the event from getting handled twice when the user clicked on a marker. To do that you could just use event.stopPropagation();
参见： https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
在您的代码中，您可以像这样使用它：
In your code you can use it like this:
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);
我制作一个快速的示范游戏：
https://jsfiddle.net/andi_lo/guzskv7n/7/
I made a quick jsfiddle for demonstration: https://jsfiddle.net/andi_lo/guzskv7n/7/
这篇关于Mapbox GL JS：如果单击标记，则忽略地图点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
