iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
1
自我挑戰組

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

遊記ep.22 Click and Marker in Google村

我們在 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 官方文件


上一篇
遊記ep.21 Event in Google村
下一篇
遊記ep.23 SecretMessage in Google村
系列文
Ruby菜鳥村村民遊記30

尚未有邦友留言

立即登入留言