亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將動態數據傳遞給傳單中的多個標記?

如何將動態數據傳遞給傳單中的多個標記?

鴻蒙傳說 2021-12-23 15:11:23
我想將一些動態數據傳遞給我在循環中創建的標記。最后,當我點擊任何標記時,它只顯示最后添加的標記數據。var i=0//creating multilple markerswhile(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++;  }我希望每個標記都應該有自己的數據(即緯度)。
查看完整描述

1 回答

?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

你能試試這個代碼嗎?


<!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/[email protected]/dist/leaflet.css"

    />

    <script src="https://unpkg.com/[email protected]/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:

        '&copy; <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>


查看完整回答
反對 回復 2021-12-23
  • 1 回答
  • 0 關注
  • 136 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號