传单标记比较(默认标记与数据库中的标记)


Leaflet Marker Comparison (Default Marker VS Marker from Database)

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

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

我的问题是这样的:2号和3号代码正在使用在地图中显示标记的传单基础知识,但是我在使用这两个代码时遇到了问题。单击标记后,2号显示弹出窗口,但3号不是,我该如何修复它?单击标记时,代码 3 将显示一个弹出窗口。泰

根据文档,内部事件方法你应该参考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'); 
   });

如果您要添加许多标记,为什么不使用l.featureGroup并在那里绑定一次单击处理程序,而不是为每个标记绑定一次?查看示例http://leafletjs.com/reference.html#featuregroup