如何在地图上的标记上添加删除按钮

2024-05-20 • 问答

我正在使用传单将http://esri.github.io/esri-leaflet/examples/geocoding-control.html上的代码用于HTML文件上的嵌入式地图。我想在地图上的标记上添加一个删除按钮。基本上是右上角的X。我尝试添加

  L.marker.bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>')

像这样：

searchControl.on('results',function (data) {
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
  L.marker.bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>')

  });

发现，您不能将bindPopup函数与L.marker一起使用，因为它会给该函数带来未捕获的类型错误。还有另一种方法吗？

您将弹出窗口绑定到标记，而无需传递坐标，也不会添加到地图。

您应该执行以下操作：

 var searchControl = L.esri.Geocoding.geosearch().addTo(map);

    var results = L.layerGroup().addTo(map);

    searchControl.on('results',function(data) {
      results.clearLayers();
      for (var i = data.results.length - 1; i >= 0; i--) {
        // here bind the popup
        results.addLayer(L.marker(data.results[i].latlng).bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>'));
      }
});

<html>

<head>
  <meta charset="utf-8" />
  <title>Geocoding control</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.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>


  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.3.1/dist/esri-leaflet.js" integrity="sha512-Np+ry4Dro5siJ1HZ0hTwn2jsmu/hMNrYw1EIK9EjsEVbDge4AaQhjeTGRg2ispHg7ZgDMVrSDjNrzH/kAO9Law==" crossorigin=""></script>


  <!-- Load Esri Leaflet Geocoder from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.1/dist/esri-leaflet-geocoder.css" integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ==" crossorigin="">
  <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.1/dist/esri-leaflet-geocoder.js" integrity="sha512-YUgyCwPXzSCFuYgNIsumhktAolzwxETPBwc+xAgJOW7B3/1r1EKf0WYpmNo+6a/9C/EAF9RxYnMynEmd+77fTA==" crossorigin=""></script>



  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  </style>
</head>

<body>

  <div id="map"></div>

  <script>
    var map = L.map('map').setView([40.91,-96.63],4);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
      attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    var searchControl = L.esri.Geocoding.geosearch().addTo(map);

    var results = L.layerGroup().addTo(map);

    searchControl.on('results',function(data) {
      results.clearLayers();
      for (var i = data.results.length - 1; i >= 0; i--) {
        results.addLayer(L.marker(data.results[i].latlng).bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>'));
      }
    });
  </script>

</body>

</html>

如何在地图上的标记上添加删除按钮

zhutian87897998 回答：如何在地图上的标记上添加删除按钮

大家都在问