Question

我正在使用mapbox并在地图上放置几个标记。我的代码看起来像这样：

add.locations.forEach((location) => {
    console.log(location.long + " " + location.lat);
    // add marker to map
    let marker = new mapboxgl.Marker(el)
        .setLngLat([location.long, location.lat])
        .setPopup(popup)
        .addTo(this.map);

    this.markers.push(marker);
});

当我查看控制台时，console.log(location.long + " " + location.lat);有两个不同的长和纬度可见。但是在地图上只有最后一个位置/指针在那里！？

这里可能有什么问题？

Answer 1

看起来您正在为所有标记使用相同的el容器，因此在每次循环后，新标记将覆盖前一个标记（因此只保留最后一个标记）。

您应该为每个标记创建一个容器：

add.locations.forEach((location) => {

  // create a HTML element for each feature
  const el = document.createElement('div');

  // make a marker for each feature and add to the map
  const marker = new mapboxgl.Marker(el)
    .setLngLat([location.long, location.lat])
    .setPopup(popup)
    .addTo(this.map);

  this.markers.push(marker);
});

https://www.mapbox.com/help/custom-markers-gl-js/#add-markers-to-the-map

Mapbox只添加最后一个标记？

1 个答案: