Leaflet .Repeated Markers 结合 esri-leaflet-geocoder

问题描述

嗨，我是 Leaflet 的新手，我正在尝试将 Esri Geocoding control 与 Leaflet.RepeatedMarkers 结合起来。实际上，我需要在第一张地图的 [-180,180] 上重复标记。下面的代码工作正常。不幸的是，当我尝试使用 Esri 地理编码控件进行新搜索时，“旧”标记仍然存在。

关于如何在我尝试新搜索时清除/删除“旧”标记的任何建议。

提前致谢！

亚当

<!doctype html>
<html lang="en">
<head>
  <Meta charset="utf-8">
  <title>leaflet-geosearch</title>
  <Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>

    <!-- Load Leaflet from CDN -->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>  

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.5.0/dist/esri-leaflet.js"
    integrity="sha512-ucw7Grpc+iEQZa711gcjgMBnmd9qju1CICsRaryvX7HJklK0pGl/prxKvtHwpgm5ZHdvAil7YPxI1oWPOWK3UQ=="
    crossorigin=""></script>


<!-- Load Esri Leaflet Geocoder from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.css"
    integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
    crossorigin="">
    
   <link rel="stylesheet" href="C:/Users/Nikos/Desktop/LEAFLET/TEST_FIELD/leaflet-icon-pulse-master/dist/L.Icon.pulse.css" />
    
  <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.3/dist/esri-leaflet-geocoder.js"
    integrity="sha512-HrFUyCEtIpxZloTgEKKMq4RFYhxjJkCiF5sDxuAokklOeZ68U2NPfh4MFtyIVWlsKtVbK5GD2/JzFyAfvT5ejA=="
    crossorigin=""></script>

   <script src='https://unpkg.com/leaflet.repeatedmarkers@latest/Leaflet.RepeatedMarkers.js'></script>

    

   
  <style>
    html,body,#map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

</head>
<body>
  <div id="map"></div>
  <script>
    const map = L.map('map',{
      center: [0,0],zoom: 2,// minZoom:3,// maxZoom:13
    });



 L.esri.basemapLayer('ShadedRelief').addTo(map);

var Esri_WorldShadedRelief = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}',{
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri',//maxZoom: 11,// minZoom: 5
}).addTo(map);

    var searchControl = L.esri.Geocoding.geosearch().addTo(map);
        var results = L.layerGroup().addTo(map);
        
        searchControl.on('results',function (data) {
        results.clearLayers();
        
        
        var repeats = L.gridLayer.repeatedMarkers().addTo(map);
        
        for (var i = data.results.length - 1; i >= 0; i--) {
            //console.log(data.results[i].latlng);
            marker = L.marker(data.results[i].latlng);      
            repeats.addMarker(marker);
            //console.log(marker);
            //repeats.removeMarker(marker);
            
                }       
        });



   
  </script>
</body>
</html>

解决方法

将重复的标记添加到结果图层组而不是地图：

 var repeats = L.gridLayer.repeatedMarkers().addTo(results);

esri-leaflet-geocoder javascript leaflet markers repeat repeat

Leaflet .Repeated Markers 结合 esri-leaflet-geocoder

问题描述

解决方法

相关问答