求助：使用Mapbox添加多个标记时仅显示最后一个标记

嘿，这个问题我之前也踩过坑！核心原因其实特别好理解：你在循环里反复复用了同一个el DOM元素来创建Marker。

Mapbox的Marker类是直接操作真实DOM节点的——当你把同一个el传给多个new mapboxgl.Marker()时，每创建一个新Marker，Mapbox就会把这个el从之前绑定的Marker上移除，然后挂载到新Marker对应的地图位置。所以最后只有最后一个Marker能保留这个DOM元素，前面的Marker因为失去了绑定的节点，自然就显示不出来了。

解决方法 #

根据你的需求，分两种场景处理：

场景1：所有Marker样式完全相同 #

在循环内部克隆原有的el元素，给每个Marker分配独立的DOM节点：

add.locations.forEach((location) => {
  console.log(location.long + " " + location.lat);
  // 深克隆原元素，确保每个Marker有自己独立的DOM节点
  const markerEl = el.cloneNode(true);
  let marker = new mapboxgl.Marker(markerEl)
    .setLngLat([location.long, location.lat])
    .setPopup(popup)
    .addTo(this.map);
  this.markers.push(marker);
});

这里cloneNode(true)是深克隆，会复制元素的所有子节点和样式属性，完美复用你原本的Marker样式。

场景2：每个Marker需要自定义样式/内容 #

如果每个Marker的外观不同，可以在循环里动态创建新的DOM元素：

add.locations.forEach((location) => {
  console.log(location.long + " " + location.lat);
  // 动态创建新的标记容器
  const markerEl = document.createElement('div');
  // 自定义样式类（需要提前在CSS里定义好）
  markerEl.className = 'custom-marker';
  // 也可以直接设置内联样式或添加内容
  markerEl.style.width = '20px';
  markerEl.style.height = '20px';
  markerEl.style.backgroundColor = '#ff0000';
  
  let marker = new mapboxgl.Marker(markerEl)
    .setLngLat([location.long, location.lat])
    .setPopup(popup)
    .addTo(this.map);
  this.markers.push(marker);
});

额外注意：Popup的复用问题 #

如果你现在用的popup也是同一个全局实例，那点击不同Marker时，Popup会被移到当前Marker的位置，而不是每个Marker有自己的专属Popup。如果需要每个Marker显示不同的Popup内容，记得在循环里创建新的Popup实例：

add.locations.forEach((location) => {
  console.log(location.long + " " + location.lat);
  const markerEl = el.cloneNode(true);
  // 为当前Marker创建专属Popup
  const locationPopup = new mapboxgl.Popup({ offset: 25 })
    .setHTML(`<div>位置名称：${location.name}</div><div>坐标：${location.long}, ${location.lat}</div>`);
  
  let marker = new mapboxgl.Marker(markerEl)
    .setLngLat([location.long, location.lat])
    .setPopup(locationPopup)
    .addTo(this.map);
  this.markers.push(marker);
});

内容的提问来源于stack exchange，提问作者Jenssen