将文本添加到 MapBox 标记

Question

我目前正在使用如下代码将具有不同图标的多个标记添加到 MapBox 地图中：

L.mapbox.accessToken = 'xxxx';
var map = L.mapbox.map('map')
.setView([XX.0309243, XX.2741612], 14)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var myLayer = L.mapbox.featureLayer().addTo(map);
var geoJson = {
type: 'FeatureCollection',
features: [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [XX.2741612, XX.0309243]
},
'properties': {
'title': '11-Jun 21:54:56',
'icon': {
'iconUrl': '/images/markers/marker_045.png',
'iconSize': [32, 32],
'iconAnchor': [25, 25],
'popupAnchor': [0, -25],
'className': 'dot'
}
}
}
]
};
// Set a custom icon on each marker based on feature properties.
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon(feature.properties.icon));
});
// Add features to the map.
myLayer.setGeoJSON(geoJson);

我可以对此代码进行任何更改，以在每个标记附近添加一个标签吗？现在，要查看文本，您需要单击标记。

Answer 1

我认为您必须在标记之前创建一个弹出实例并将其预先添加到地图中。然后您可以将其附加到标记上

var popup = new mapboxgl.Popup()
  .setText('Description')
  .addTo(map);

let marker = new mapboxgl
  .Marker()
    .setLngLat([-96, 37.8])
    .addTo(map)
    .setPopup(popup);

我为你创造了一把小提琴。您可以从代码片段中创建一个方法，并在每次想要添加弹出窗口和标记时调用该例程。在您的具体情况下，您可能必须迭代，您不能直接添加层，但必须在两者之间构建一些逻辑。