首页 文章

Mapbox GL JS：如果单击标记，则忽略 Map 点击事件

提问于
浏览 次
2

我在 Map 上有一个标记 . 我想在单击时更改其状态，并在单击 Map 上的其他位置时将其更改回来 .

问题是单击标记时也会触发 map.on("click", console.log) .

我想只看到标记点击事件，因为 Map 点击会调用状态回滚 .

<!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>
javascript html mapbox mapbox-gl-js mapbox-gl

2 回答

  • 0

    您可能想使用 map.once() 或 map.off() ，请参阅：Double on click event with mapbox gl

    回复于
  • 4

    我认为你想做的是当用户点击标记时阻止事件被处理两次 . 要做到这一点，你可以使用 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/

    回复于

相关问题