在Mapbox中添加新标记之前删除先前的标记

时间:2019-03-25 19:41:47

标签: angular typescript web mapbox-gl-js mapbox-marker

当通过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
    };
  }

当前流量:

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

所需流量:

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

1 个答案:

答案 0 :(得分:0)

我只是假设您正在使用Google地图。您检查过此网址了吗?

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);
    }