时间戳

首页 > 解决方案 > 在 Mapbox 中添加新标记之前删除以前的标记

angular - 在 Mapbox 中添加新标记之前删除以前的标记

问题描述

当地图通过 GeoJson 数据加载时，我有以下代码在该位置显示标记。它工作得很好，问题是我想在添加新标记时删除以前的地图标记。我应该在哪里进行更改以完美工作。

这是完整的功能

prepareGeoJsonData(data) {
    let features = [];
    let counter = 0;

    for (let val of data) {
      features.push({
        type: "Feature",
        geometry: val.address.geometry.border,
        center: val.address.geometry.center,
        properties: {
          center: val.address.geometry.center.coordinates,
          landUnitId: val.memberOf.parcel[0]
        },
        id: counter++,
      });
      //
code for marker customization
//
        let marker = new mapboxgl.Marker(el)
          .setLngLat(cords)
          // .setPopup(popup)
          .addTo(this._mapRef);
        this.markers.push(marker);
      }
    };
    return {
      type: "FeatureCollection",
      features: features
    };
  }

当前流量：

页面加载->地图加载->标记出现->应用过滤器->添加新标记->以前的标记仍然存在

所需流量：

页面加载->地图加载->标记出现->应用过滤器->添加新标记->以前的标记消失

标签： angulartypescriptwebmapbox-gl-jsmapbox-marker

解决方案

我只是假设您使用的是谷歌地图。你检查过这个网址吗？

https://developers.google.com/maps/documentation/javascript/examples/marker-remove

TLDR；

    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(null);
    }

推荐阅读