jquery 瓣叶添加新标记,删除类功能中的旧标记

tkclm6bt  于 2023-03-17  发布在  jQuery
关注(0)|答案(2)|浏览(157)

说明:

使用leaflet,并制作了一个名为Mapclass,以便在需要时轻松使用所有功能,所有设置,但有一个简单的问题,我无法处理它。init上的Map在中心创建一个标记,但我想让用户在单击时创建新标记,但删除前一个,如果您单击Map,则会创建许多标记,但我只想要一个标记。
JSFiddle
我只需要这个密码:

if (marker) this.map.removeLayer(marker);

但它当然给予我这样的错误:
参考错误:未定义标记”

问题:

因为先前的标记创建在marker()中,但新标记创建在newMarker()函数中,所以我不知道如何删除旧标记,我以前这样做时,我的代码不是class容易访问let marker,但现在我混淆了如何访问marker()函数中的marker变量。

目标:(简称)

我只是想在Map上点击后一个标记,它已经在Map上创建了许多标记!

3zwjbxry

3zwjbxry1#

您可以初始化一个空的layerGrooup,并在每次添加标记时将其存储在那里,当您添加一个新标记时,您可以清除markerGroup的图层。
此外,你不应该示例化你的Map两次,所以你只有一个Map引用。

class Map {
  constructor(map, lat_long) {
    this.map = map;
    this.lat_long = lat_long;
    this.markerLayer = L.layerGroup().addTo(this.map)
  },
 ...
 newMarker(latLng) {
    this.markerLayer.clearLayers();

    L.marker(latLng, {
      draggable: true
    }).addTo(this.markerLayer);

  }
}

x一个一个一个一个x一个一个二个x

hmtdttj4

hmtdttj42#

添加图层(此状态标记);prevState.标记.移除(这个.我的Map);

import "leaflet.markercluster/dist/leaflet.markercluster-src";
import "leaflet.markercluster/dist/leaflet.markercluster";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import "leaflet.markercluster/dist/MarkerCluster.css";
componentDidUpdate(prevProps, prevState) {
      // console.log(
      //     'componentDidUpdate',
      //     prevState.markers,
      //     this.state.markers
      // );
      if (
        prevState.markers !== undefined&&
        prevState.markers !== this.state.markers
      ) {
          // console.log('action=remove marker');
          prevState.markers.remove(this.mymap);
      }
    }

    markerCluster(markerClusterData){
      console.log('markerClusterData',markerClusterData)
      const greenIcon = new L.Icon({
        iconUrl:
            'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        shadowUrl:
            'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41],
      });
      let markers = L.markerClusterGroup();
      for (let i = 0; i < markerClusterData.length; i++) {
        let addressPoint = markerClusterData[i];
        let title = `<b>${markerClusterData[i]}</b>`;
        let marker = L.marker(new L.LatLng(addressPoint[0], addressPoint[1]), {icon: greenIcon}).bindPopup(title);
        markers.addLayer(marker);
      };
      this.setState({'markers':markers},()=>this.mymap.addLayer(this.state.markers));
    }
<Button onClick={()=>this.markerCluster([[24.6949409651268, 121.313537600025]])}>Button1</Button>
<Button onClick={()=>this.markerCluster([[24.6949409651268, 121.313537600025],[24.6944257339445, 121.308595784335]])}>Button2</Button>

相关问题