Как добавить кнопку удаления на маркер на карте - PullRequest
Новая
       1

Как добавить кнопку удаления на маркер на карте

0 голосов
/ 05 ноября 2019

Я использую код на 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, поскольку она выдает ошибку типа uncaught дляэта функция. Есть ли другой способ сделать это?

1 Ответ

1 голос
/ 05 ноября 2019

Вы привязываете всплывающее окно к маркеру без передачи координат и без добавления на карту.

Вы должны сделать что-то вроде этого: 

 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...