遊記ep.24 動態改變 in Google村

第 11 屆 iThome 鐵人賽

DAY 24

自我挑戰組

Ruby菜鳥村村民遊記系列第 24 篇

11th鐵人賽 google api google map

Bunny

2019-10-09 23:05:46

913 瀏覽

分享至

今天我們將介紹如何去觸發動態改變狀態，
我們先來看一下完整的程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Getting Properties With Event Handlers</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 75%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: originalMapCenter
        });

        var infowindow = new google.maps.InfoWindow({
          content: 'Change the zoom level',
          position: originalMapCenter
        });
        infowindow.open(map);

        map.addListener('zoom_changed', function() {
          infowindow.setContent('Zoom: ' + map.getZoom());
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

function initMap() {
  var originalMapCenter = new google.maps.LatLng(23.5, 121);
  var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 8,
  center: originalMapCenter
});

起手式都先建立好一張地圖，並設定好中心點(center)以及放大倍率(zoom)。

var infowindow = new google.maps.InfoWindow({
  content: 'Change the zoom level',
  position: originalMapCenter
});
infowindow.open(map);

再來我們產生資訊視窗，裡面設定我們想顯示的內容，以及資訊視窗放置的位置，
infowindow.open(map);設定好後別忘了展開在地圖上～

map.addListener('zoom_changed', function() {
  infowindow.setContent('Zoom: ' + map.getZoom());
});
}

最後加上一個觸發事件，我們設定的觸發要素為 zoom_changed 放大倍率改變，
觸發了要做什麼事呢？我們想要讓 infowindow 的顯示內容改變：
"顯示目前的放大倍率"。
這邊使用的方法是 .setContent 去改變資訊視窗的內容；
要取得 zoom 目前的放大倍率則可以使用 map.getZoom()方法。
這樣一來，就可以在操作地圖放大縮小時得到即時的倍率放大數值了！

參考文件：
Google map 官方教學文件

今天，你把玩 Google Map了嗎？：）