如何将动态数据传递给传单中的多个标记？
我想将一些动态数据传递给我在循环中创建的标记。
最后，当我点击任何标记时，它只显示最后添加的标记数据。
var i=0
//creating multilple markers
while(coordinates.Latitude[i]){
marker = new L.Marker(new L.LatLng(coordinates.Latitude[i],
coordinates.Longitude[i]),{icon: greenIcon});
//adding data to the marker
marker.myData = { id: coordinates.Latitude[i] };
marker.on('click', function (e) {
alert(marker.myData.id);
});
map.addLayer(marker);
i++;
}
我希望每个标记都应该有自己的数据（即纬度）。
鸿蒙传说浏览 148回答 1
1回答
-
红颜莎娜
你能试试这个代码吗？<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script> <style> * { margin: 0; } #map { width: 100vw; height: 100vh; } </style> </head> <body> <div id="map"></div> </body> <script> const coordinates = { Latitude: { '0': 17.7222014, '1': 17.3924217, '2': 17.3906471, '3': 17.433709, }, Longitude: { '0': 83.2892612, '1': 78.4689988, '2': 78.5009093, '3': 78.5016144, }, }; const map = L.map('map').setView([17.3924217, 78.4689988], 7); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', }).addTo(map); for (let i = 0; i < Object.keys(coordinates.Latitude).length; i += 1) { const marker = L.marker([ coordinates.Latitude[i.toString()], coordinates.Longitude[i.toString()], ]); marker.myData = { id: coordinates.Latitude[i.toString()] }; marker.on('click', function(e) { alert(marker.myData.id); }); marker.addTo(map); } </script></html>
随时随地看视频慕课网APP
相关分类
JavaScript