使用 Mapbox gl js 在悬停时将弹出窗口添加到自定义标记
Adding popups on hovering to custom markers using Mapbox gl js
我正在采用这个 example 但我需要弹出窗口出现在悬停时而不是点击时。以下是现在添加弹出窗口的方式:
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);
这是我的 jsFiddle,谁能帮我解决这个问题?
mapboxgl.Marker
被实现为简单的 HTML <div>
元素。您可以将标准事件侦听器附加到它们并手动切换弹出窗口:
const marker = new mapboxgl.Marker({/* options */});
const markerDiv = marker.getElement();
markerDiv.addEventListener('mouseenter', () => marker.togglePopup());
markerDiv.addEventListener('mouseleave', () => marker.togglePopup());
查看文档:https://docs.mapbox.com/mapbox-gl-js/api/#marker#getelement
编辑:防止弹出窗口在点击时打开
我试着做了一些测试,唯一可靠的工作是在你自己的点击处理程序中调用 marker.togglePopup()
map.on('click', event => {
const target = event.originalEvent.target;
const markerWasClicked = markerDiv.contains(target);
marker.togglePopup();
});
答案有效。但是,如果您在将鼠标悬停在标记上时单击它,弹出窗口将关闭,离开标记时弹出窗口将再次打开。
要防止这种行为,您应该使用方法 marker.addTo(map)
和 marker.remove()
这些方法由 marker.togglePopup()
函数在内部使用:Marker source
togglePopup() {
var popup = this._popup;
if (!popup) return;
else if (popup.isOpen()) popup.remove();
else popup.addTo(this._map);
}
下面的工作示例
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>
我正在采用这个 example 但我需要弹出窗口出现在悬停时而不是点击时。以下是现在添加弹出窗口的方式:
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);
这是我的 jsFiddle,谁能帮我解决这个问题?
mapboxgl.Marker
被实现为简单的 HTML <div>
元素。您可以将标准事件侦听器附加到它们并手动切换弹出窗口:
const marker = new mapboxgl.Marker({/* options */});
const markerDiv = marker.getElement();
markerDiv.addEventListener('mouseenter', () => marker.togglePopup());
markerDiv.addEventListener('mouseleave', () => marker.togglePopup());
查看文档:https://docs.mapbox.com/mapbox-gl-js/api/#marker#getelement
编辑:防止弹出窗口在点击时打开
我试着做了一些测试,唯一可靠的工作是在你自己的点击处理程序中调用 marker.togglePopup()
map.on('click', event => {
const target = event.originalEvent.target;
const markerWasClicked = markerDiv.contains(target);
marker.togglePopup();
});
要防止这种行为,您应该使用方法 marker.addTo(map)
和 marker.remove()
这些方法由 marker.togglePopup()
函数在内部使用:Marker source
togglePopup() {
var popup = this._popup;
if (!popup) return;
else if (popup.isOpen()) popup.remove();
else popup.addTo(this._map);
}
下面的工作示例
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>