Question

我是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>

Answer 1

你试过搜索过吗？ How do you add marker to map using leaflet map.on('click', function) event handler - 从JSON请求加载时可以应用相同的内容。

从传单中的json加载标记

1 个答案: