我一直在关注本教程https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/
我的标记显示正常,我可以单击标记以显示弹出窗口,但我希望总是显示弹出窗口。
我已经成功修改了CSS,使其不显示箭头和“ x / close”按钮。
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.032, 38.913]
},
"properties": {
"title": "Mapbox",
"description": "Washington, D.C."
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox",
"description": "San Francisco, California"
}
}]
};
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({offset: 25}) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
有什么想法吗?
答案 0 :(得分:2)
我已经成功修改了CSS,使其不显示箭头和“ x / close”按钮
要隐藏“ x”按钮,还可以使用closeButton选项(请参见API reference)。
但是我希望总是显示弹出窗口。
使用togglePopup()来“根据当前状态打开或关闭绑定的弹出窗口”:
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({closeOnClick: false, closeButton: false}).setText("some text"))
.addTo(map)
.togglePopup();