iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
1
自我挑戰組

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

遊記ep.21 Event in Google村

昨天講完地圖的種類,
今天想介紹如何設定地圖的語言——在 Google 稱為 Localizing the Map

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=ja&region=JP"
    async defer>
    </script>

一般未設定的情況下就是自動預設瀏覽器使用的語言,
這段 JS 程式碼最後加了一小段的設定 language=ja&region=JP",關於語言以及地區
所以當我們去展開這張地圖的時候,會發現地圖上的資訊都會用日文來做註記。
https://ithelp.ithome.com.tw/upload/images/20191006/20120907pCRGRL0WTG.png

我們常在 JS 中去設定某些事件例如 .click on,
在 Google 地圖中其實也有類似的使用技巧:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Click Events</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: 100%;
      }
      /* 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 taiwan = {lat: 23.5, lng: 121};
        var taipei = {lat: 25.03746, lng: 121.564558};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: taiwan
        });

        var marker = new google.maps.Marker({
          position: taipei,
          map: map,
          title: 'Click to zoom'
        });

        map.addListener('center_changed', function() {
          // 3 seconds after the center of the map has changed, pan back to the
          // marker.
          window.setTimeout(function() {
            map.panTo(marker.getPosition());
          }, 3000);
        });

        marker.addListener('click', function() {
          map.setZoom(12);
          map.setCenter(marker.getPosition());
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YourKeyHere&callback=initMap">
    </script>
  </body>
</html>

先說明一下這段程式碼做了什麼事,

  • 建立地圖
  • 加入了兩個 Listener
  • 一個 listener 當你移動地圖後3秒把地圖的center改以設定的 marker 為中心
  • 一個則是附加了事件,點擊 marker 會自動放大 zoom 的倍率
map.addListener('center_changed', function() {
          // 3 seconds after the center of the map has changed, pan back to the
          // marker.
          window.setTimeout(function() {
            map.panTo(marker.getPosition());
          }, 3000);
        });

在 add.Listener() 你可以決定要用什麼要素來觸發事件,
這裡的 center_changed 是指當你把地圖移開中心點後便會觸發以下的事件:
set 一個 timer,將 map 指向 marker 的位置。

marker.addListener('click', function() {
          map.setZoom(12);
          map.setCenter(marker.getPosition());
        });

這裡則是對 marker 做了一個事件觸發:
當你點擊 marker 的時候會將地圖放大倍率並將地圖中心點改為 marker 所指定的經緯度座標。

觸發要素其實還有許多可玩性~
對 map 你可以做以下行為

  • bounds_changed
  • center_changed
  • click
  • dblclick
  • drag
  • dragend
  • dragstart
  • heading_changed
  • idle
  • maptypeid_changed
  • mousemove
  • mouseout
  • mouseover
  • projection_changed
  • resize
  • rightclick
  • tilesloaded
  • tilt_changed
  • zoom_changed

對 marker 則可以選擇這些動作:

  • 'click'
  • 'dblclick'
  • 'mouseup'
  • 'mousedown'
  • 'mouseover'
  • 'mouseout'

讓我們一起好好把玩 google map吧 :)

參考文件:
Googel 官方文件 Simple Click


上一篇
遊記ep.20 Map Type in Google村
下一篇
遊記ep.22 Click and Marker in Google村
系列文
Ruby菜鳥村村民遊記30

尚未有邦友留言

立即登入留言