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

Mapbox GL JS：如果單擊了標記，則忽略地圖單擊事件

問題描述

2 個解決方案

解決方案1
6 已采納 2017-07-26 12:16:19

解決方案2
0 2017-09-01 21:39:13

Mapbox GL JS：如果單擊了標記，則忽略地圖單擊事件

問題描述

2 個解決方案

解決方案1 6 已采納 2017-07-26 12:16:19

解決方案2 0 2017-09-01 21:39:13

解決方案1
6 已采納 2017-07-26 12:16:19

解決方案2
0 2017-09-01 21:39:13