我在地图上有一个标记.我想在单击时更改其状态,并在单击地图上的其他位置时将其更改回来.
问题是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>
解决方法:
我想你想做的是当用户点击标记时阻止事件被处理两次.要做到这一点,你可以使用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/