从传单中的 json 加载标记答案

【问题标题】：Load markers from json in Leaflets从传单中的 json 加载标记
【发布时间】：2017-07-16 06:17:16
【问题描述】：

我是 Leaflet 的新手，我想知道如何将标记从数据库加载到 php 中的传单地图中。

我有一个 php 代码，它根据所选的病房从数据库中获取纬度和对数，并将其编码为 json，在主页上，我有 3 个链接，即 ward1、ward2、ward3，单击链接后，特定病房的不同标记会相应地加载到地图上。

如何从每个病房的 json 文件中调用这些标记，而不是手动编写？

 <section>  
      <div id="gmap1"></div>
<ul>
    <li><a id="ward1" href="#">ward1</a></li>
    <li><a id="ward2" href="#">ward2</a></li>
    <li><a id="ward3" href="#">ward3</a></li>
</ul>

      <script>
var lat = 17.9487;
var lng =  73.8919;
var zoom =  10;
var map = new L.Map('gmap1');

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: 5, maxZoom: 18, attribution: osmAttrib});

map.addLayer(osm);
map.setView(new L.LatLng(lat, lng), zoom);

// add markers
var aa = L.marker(["17.9507900000","73.8886383300"]).bindPopup('AA'),
bb = L.marker([17.9497333300,73.8975800000]).bindPopup('BB'),
cc = L.marker(["17.9507616700","73.8972833300"]).bindPopup('CC'),
dd = L.marker(["17.9468733300","73.8952383300"]).bindPopup('DD'),
ee = L.marker([17.9509700000,73.8885616700]).bindPopup('EE'),
ff = L.marker([17.9503500000,73.8949550000]).bindPopup('FF')


var ward1 = L.layerGroup([aa, bb]);
var ward2 = L.layerGroup([cc, dd]);
var ward3 = L.layerGroup([ee,ff]);

$("#ward1").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(ward1)) {
        $(this).removeClass('selected');
        map.removeLayer(ward1);
    } else {
        map.addLayer(ward1);        
        $(this).addClass('selected');
   }
});

$("#ward2").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(ward2)) {
        $(this).removeClass('selected');
        map.removeLayer(ward2);
    } else {
        map.addLayer(ward2);        
        $(this).addClass('selected');
    }
});

$("#ward3").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(ward3)) {
        $(this).removeClass('selected');
        map.removeLayer(ward3);
    } else {
        map.addLayer(ward3);   

        $(this).addClass('selected');
   }
});

      </script>
</section>

【问题讨论】：

标签： javascript json leaflet

【解决方案1】：

您是否尝试过在 SO 上进行搜索？ How do you add marker to map using leaflet map.on('click', function) event handler - 当您从 JSON 请求加载它时，同样适用。

【讨论】：