Question

你如何处理传单中的标记？在我提出问题之前，我想在下面显示我的完整代码。

1.显示从传单到我的网站的地图。

 <div id="map" style="width: 708px; height: 450px"></div>
    var map = new L.Map('map');
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data &copy; OpenStreetMap contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 15, maxZoom: 18, attribution: osmAttrib});
    map.addLayer(osm);

2.下一个是在弹出窗口中放置默认标记（传单基础）

map.setView([14.7053533,121.031448],15);
L.marker([14.7053533,121.031448]).addTo(map)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

3.接下来是从数据库到地图生成标记

function getInfo() { 
    $.getJSON("get_info.php", function (data) { 
      for (var i = 0; i < data.length; i++) { 
        var location = new L.LatLng(data[i].lat, data[i].lng); 
        var marker = new L.Marker(location); 
           marker.bindPopup(
              data[i].name + "<br>" + 
              data[i].user_date + "<br>" + 
              data[i].user_time + "<br>" + 
              data[i].address + "<br>"
           ).addTo(map);
           marker.on('click', function(e) { // HERE YOU GO
           marker.openpopup();
                var ll = marker.getLatLng();
document.querySelector('#userLat1').value = ll.lat;
document.querySelector('#userLng1').value = ll.lng;
alert('You have selected a Marker that will be deleted'); 

           });
         } 
    }); 
  }

这是错误

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.leaflet.js:7 o.Popup.o.Class.extend._updateContentleaflet.js:7 o.Popup.o.Class.extend.updateleaflet.js:7 o.Popup.o.Class.extend.onAddleaflet.js:6 o.Map.o.Class.extend._layerAddleaflet.js:6 o.Map.o.Class.extend.addLayerleaflet.js:7 o.Map.include.openPopupleaflet.js?_=1418153335296:7 o.Marker.include.openPopupleaflet.js?_=1418153335296:7 o.Marker.include.togglePopupleaflet.js?_=1418153335296:6 o.Mixin.Events.fireEventleaflet.js?_=1418153335296:7 o.Marker.o.Class.extend._onMouseClickleaflet.js?_=1418153335296:8 t.(anonymous function).s

我的问题是这样的： No 2 。并且 No.3 代码正在使用在Map中显示标记的Leaflet Basics，但是我遇到了两个代码的问题。单击标记时，No.2显示弹出窗口但是3 不如何修复它？单击标记时，代码3将显示弹出窗口。 TY

Answer 1

根据文档，内部事件方法，您应该参考this而不是marker。另请注意打开弹出窗口的名称：。openPopup()不是.openpopup()。

尝试以下代码：

   marker.on('click', function(e) { // HERE YOU GO
      this.openPopup();
      var ll = this.getLatLng();
      document.querySelector('#userLat1').value = ll.lat;
      document.querySelector('#userLng1').value = ll.lng;
      alert('You have selected a Marker that will be deleted'); 
   });

Answer 2

如果您要添加许多标记，为什么不使用l.featureGroup并将点击处理程序绑定一次，而不是每个标记绑定一次？见例子 http://leafletjs.com/reference.html#featuregroup

宣传单标记比较（数据库中的默认标记VS标记）

2 个答案: