遊記ep.22 Click and Marker in Google村

第 11 屆 iThome 鐵人賽

DAY 22

自我挑戰組

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

11th鐵人賽 google map google api

Bunny

2019-10-07 22:30:46

1280 瀏覽

分享至

我們在 google map 上能隨意點擊一個座標點，
前面的範例中我們都是去手動設定座標點，
所以今天就配合昨天講過的事件觸發，來實際的實現這個功能：

<!DOCTYPE html>
<html>
  <head>
    <title>Accessing Arguments in UI 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: 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 map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 23.5, lng: 121 }
        });

        map.addListener('click', function(e) {
          placeMarkerAndPanTo(e.latLng, map);
        });
      }

      function placeMarkerAndPanTo(latLng, map) {
        var marker = new google.maps.Marker({
          position: latLng,
          map: map
        });
        map.panTo(latLng);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=PutYourKeyHere&callback=initMap">
    </script>
  </body>
</html>

我們一樣先把地圖建立起來，
讓中心點落在台灣本島上，

function placeMarkerAndPanTo(latLng, map) {
        var marker = new google.maps.Marker({
          position: latLng,
          map: map
        });
        map.panTo(latLng);
      }

再來建立一個 function placMarkerAndpanTo(){}
這個 function 可以接受兩個參數 latLng 以及 map
主要是讓我們可以在 google map 上使用引數帶來的經緯度來建立 marker。

map.addListener('click', function(e) {
          placeMarkerAndPanTo(e.latLng, map);
        });
      }

最後我們使用 .addListener 這個方法選擇 click 這個動作來觸發後續事件：
後續事件就是引用上面建立的 function 將座標值引入，
就可以成功做到配合點擊(click)在地圖上建立 marker 的行為了！
順帶一提，每個 marker 的座標值都是獨一無二的喔～
你今天，把玩 google map 了嗎？：）

參考文件：
Google map 官方文件