[英]Adding popups on hovering to custom markers using Mapbox gl js
I'm adopting this example but I need popups to appear on hover not on click.我正在采用这个示例,但我需要弹出窗口出现在 hover 而不是点击时。 Here is how popups are added now:
这是现在添加弹出窗口的方式:
new mapboxgl.Marker(el, {
offset: [0, -25]
})
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup()//add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p><a href="' + marker.properties.link + '" target="_blank">' + marker.properties.description + '</a></p><p><a href="' + marker.properties.link + '" target="_blank"><img src="' + marker.properties.picture + '" title="" /></a></p>'))
.addTo(map);
It is my jsFiddle , could anyone help me to fix that problem?这是我的jsFiddle ,谁能帮我解决这个问题?
mapboxgl.Marker
are implemented as simple HTML <div>
elements. mapboxgl.Marker
被实现为简单的 HTML <div>
元素。 You can attach standard event listener to them and toggle the popup manually:您可以将标准事件侦听器附加到它们并手动切换弹出窗口:
const marker = new mapboxgl.Marker({/* options */});
const markerDiv = marker.getElement();
markerDiv.addEventListener('mouseenter', () => marker.togglePopup());
markerDiv.addEventListener('mouseleave', () => marker.togglePopup());
See docs: https://docs.mapbox.com/mapbox-gl-js/api/#marker#getelement见文档: https : //docs.mapbox.com/mapbox-gl-js/api/#marker#getelement
EDIT: Preventing the popup from opening on click编辑:防止弹出窗口在点击时打开
I tried did some testing, and the only thing reliably working is to call marker.togglePopup()
in your own click handler我尝试做了一些测试,唯一可靠的工作是在你自己的点击处理程序中调用
marker.togglePopup()
map.on('click', event => {
const target = event.originalEvent.target;
const markerWasClicked = markerDiv.contains(target);
marker.togglePopup();
});
Full example: https://jsfiddle.net/am2jwtzg/完整示例: https : //jsfiddle.net/am2jwtzg/
Scarysize answer is working.可怕的答案正在起作用。 However, if you click on the marker while you hover over it, the pop-up will be closed and on leaving the marker the pop-up will open again.
但是,如果您在将鼠标悬停在标记上时单击它,弹出窗口将关闭,而在离开标记时,弹出窗口将再次打开。
To prevent this behaviour you should use the methods marker.addTo(map)
and marker.remove()
These methods are used internally by the marker.togglePopup()
function: Marker source为了防止这种行为,你应该使用
marker.addTo(map)
和marker.remove()
方法这些方法由marker.togglePopup()
函数在内部使用: 标记源
togglePopup() {
var popup = this._popup;
if (!popup) return;
else if (popup.isOpen()) popup.remove();
else popup.addTo(this._map);
}
working example below下面的工作示例
mapboxgl.accessToken = 'pk.eyJ1IjoibW9ycGhvY29kZSIsImEiOiJVMnRPS0drIn0.QrB-bpBR5Tgnxa6nc9TqmQ'; var monument = [-77.0353, 38.8895]; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', center: monument, zoom: 15 }); // create the popup var popup = new mapboxgl.Popup( {offset:[28, 0]} ).setText( 'Construction on the Washington Monument began in 1848.' ); // create the marker let marker = new mapboxgl.Marker().setLngLat(monument); // get the marker element const element = marker.getElement(); element.id = 'marker' // hover event listener element.addEventListener('mouseenter', () => popup.addTo(map)); element.addEventListener('mouseleave', () => popup.remove()); // add popup to marker marker.setPopup(popup); // add marker to map marker.addTo(map);
#map { position:absolute; top:0; bottom:0; width:100%; } #marker { background-image: url('https://www.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg'); background-size: cover; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; } .mapboxgl-popup { max-width: 200px; }
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css" rel="stylesheet"/> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js"></script> <div id="map"></div>
in my case this worked就我而言,这有效
const marker = new mapboxgl.Marker()
.setLngLat(coords)
.addTo(this.map)
const popup = new mapboxgl.Popup().setHTML('Popup text')
const markerDiv = marker.getElement()
markerDiv.addEventListener('mouseenter', () => {
marker.setPopup(popup)
marker.togglePopup()
})
markerDiv.addEventListener('mouseleave', () => marker.togglePopup())
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.