iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
1
自我挑戰組

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

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

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

<!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了嗎? :)


上一篇
遊記ep.23 SecretMessage in Google村
下一篇
遊記ep.25 Control Zoom and Pan in Google村
系列文
Ruby菜鳥村村民遊記30

尚未有邦友留言

立即登入留言