如何将删除按钮添加到 map 上的标记
[英]How to add delete button to a marker on a map
问题描述
I am using the code at http://esri.github.io/esri-leaflet/examples/geocoding-control.html for an embedded map on my HTML-File using leaflet. 
I am using the code at http://esri.github.io/esri-leaflet/examples/geocoding-control.html for an embedded map on my HTML-File using leaflet. I would like to add a delete button to the marker on the map.我想在 map 上的标记上添加一个删除按钮。 Basically an X to its topright.基本上是其右上角的X I tried adding我尝试添加
L.marker.bindPopup('<button id = "closeX" onclick="closeMarker()"> X</button>')
like this:像这样：
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>')
});
and found out, you can't use the bindPopup function with L.marker as it gives an uncaught type error for that function.并发现，您不能将bindPopup function 与L.marker一起使用，因为它会为该 function 提供未捕获的类型错误。 Is there another way of doing that?还有另一种方法吗？
1 个解决方案
解决方案1
1 已采纳 2019-11-05 09:19:43
You are binding a popup to a marker without passing coords and without being added to the map.您正在将弹出窗口绑定到标记，但没有传递坐标，也没有添加到 map。
You should do something like this:你应该这样做：
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. '©. <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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.