iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
自我挑戰組

網頁學習日誌系列 第 27

API : Google Maps API 設定(3)新增多個標記

  • 分享至 

  • xImage
  •  

如果要標記多個位置,可利用陣列和for迴圈來處理:

用data定義陣列:

      var data = [
        {
          position : { lat: 25.033977, lng: 121.563998 },
          map:map,
          title:'小明的位置'
      },
      {
          position : { lat: 25.034385, lng: 121.566047 },
          map:map,
          title:'大雄的位置'
      }
      ];

for 迴圈如下:

      for (var i= 0; data.length >i ; i++) {
        var marker = new google.maps.Marker(data[i]);
      }

顯示如下圖:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321R50pbHAnWo.png

JS程式碼:

  <script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 25.0335398, lng: 121.5620666 },
        zoom: 16
      });
      var data = [
        {
          position : { lat: 25.033977, lng: 121.563998 },
          map:map,
          title:'小明的位置'
      },
      {
          position : { lat: 25.034385, lng: 121.566047 },
          map:map,
          title:'大雄的位置'
      }
      ];
      for (var i= 0; data.length >i ; i++) {
        var marker = new google.maps.Marker(data[i]);
      }
    }
  </script>

上一篇
API : Google Maps API 設定(2)地圖標記
下一篇
API : Google Maps API 設定(4) js+json 標記 wifi 熱點
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言