Mapbox GL JS：如果单击标记则忽略地图单击事件

Question

我在地图上有一个标记。我想在点击它时改变它的状态，并在点击地图上的其他地方时改变它。

问题是 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>

Answer 1

我认为您想做的是阻止事件在用户单击标记时被处理两次。为此，您可以使用 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/

Answer 2

您可能想使用 map.once() 或 map.off()，请参阅：

Mapbox GL JS：如果单击标记则忽略地图单击事件

Mapbox GL JS: ignore map click event if marker is clicked

javascript

html

mapbox

mapbox-gl-js

mapbox-gl