首页Leaflet 怎么读取后端传入的经纬度数据，并在图上标注该点位，并用图层显示隐藏该点位数据，请举个例子并给出完整代码

Leaflet 怎么读取后端传入的经纬度数据，并在图上标注该点位，并用图层显示隐藏该点位数据，请举个例子并给出完整代码

时间: 2024-02-15 19:05:53 浏览: 136

可以使用 Leaflet 的 Marker 和 LayerGroup 对象来实现标注和图层显示隐藏。以下是一个例子，假设后端传入的经纬度数据是一个 JSON 数组，每个元素包含经度和纬度信息： ```javascript var data = [ { "lat": 31.2304, "lng": 121.4737 }, { "lat": 39.9042, "lng": 116.4074 }, { "lat": 22.3193, "lng": 114.1694 } ]; ``` 首先，创建一个 Leaflet 地图： ```javascript var map = L.map('map').setView([30, 120], 6); ``` 然后，遍历数据，创建 Marker 对象并添加到 LayerGroup 中： ```javascript var markers = L.layerGroup().addTo(map); for (var i = 0; i < data.length; i++) { var marker = L.marker([data[i].lat, data[i].lng]); markers.addLayer(marker); } ``` 最后，创建一个控件来切换图层的显示和隐藏： ```javascript var overlayMaps = { "Markers": markers }; L.control.layers(null, overlayMaps).addTo(map); ``` 完整代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Leaflet Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script> </head> <body> <div id="map" style="width: 800px; height: 600px;"></div> <script> var data = [ { "lat": 31.2304, "lng": 121.4737 }, { "lat": 39.9042, "lng": 116.4074 }, { "lat": 22.3193, "lng": 114.1694 } ]; var map = L.map('map').setView([30, 120], 6); var markers = L.layerGroup().addTo(map); for (var i = 0; i < data.length; i++) { var marker = L.marker([data[i].lat, data[i].lng]); markers.addLayer(marker); } var overlayMaps = { "Markers": markers }; L.control.layers(null, overlayMaps).addTo(map); </script> </body> </html> ```

阅读全文