遊記ep.30 Click ! Draw ! in Google村

第 11 屆 iThome 鐵人賽

DAY 30

自我挑戰組

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

11th鐵人賽 google api google map

Bunny

2019-10-15 23:12:04

1634 瀏覽

分享至

今天讓我們繼續介紹昨天折線的部分，
上個章節我們介紹到 Marker，
會不會想著如果可以把 Marker 跟 Polyline 做結合呢？
那我們今天就來這麼做吧！

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex Polylines</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 80%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <input onclick="deleteLine();" type=button value="Restart">
    </div>
    <div id="map"></div>
    <script>

      // This example creates an interactive map which constructs a polyline based on
      // user clicks. Note that the polyline only appears once its path property
      // contains two LatLng coordinates.

      var poly;
      var map;
      var markers = [];
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 23.5, lng: 121}
        });

        poly = new google.maps.Polyline({
          strokeColor: '#ff0000',
          strokeOpacity: 1.0,
          strokeWeight: 3
        });
        poly.setMap(map);

        // Add a listener for the click event
        map.addListener('click', addLatLng);
      }

      // Handles click events on a map, and adds a new point to the Polyline.
      function addLatLng(event) {
        var path = poly.getPath();
        poly.setMap(map);

        // Because path is an MVCArray, we can simply append a new coordinate
        // and it will automatically appear.
        path.push(event.latLng);

        // Add a new marker at the new plotted point on the polyline.
        var marker = new google.maps.Marker({
          position: event.latLng,
          title: '#' + path.getLength(),
          map: map
        });
        markers.push(marker);
      }

      function setMapOnAll(map){
        for (var i = 0; i< markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      function deleteLine(){
        poly.setMap();
        setMapOnAll();
        poly = new google.maps.Polyline({
          strokeColor: '#ff0000',
          strokeOpacity: 1.0,
          strokeWeight: 3
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=PutYourKeyHere&callback=initMap">
    </script>
  </body>
</html>

首先生成好地圖後，我們準備步上一段新的折線：

poly = new google.maps.Polyline({
  strokeColor: '#ff0000',
  strokeOpacity: 1.0,
  strokeWeight: 3
});
poly.setMap(map);
map.addListener('click', addLatLng);

給個簡單的設定：顏色、透明度、寬度，
再設定讓折線出現在我們的地圖上，
對 map 設定一個點擊觸發事件。

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();
  poly.setMap(map);

// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
  path.push(event.latLng);
  
var marker = new google.maps.Marker({
  position: event.latLng,
  title: '#' + path.getLength(),
  map: map

對於折線，我們使用 .getPath() 這個方法來將取得的座標點畫線，
並將點擊當下的座標點 push 進 path 之中，
同時也產生一個 marker 這樣就能更精確看出線的兩邊端點，
這樣就已經完成了我們畫線的功能。

function deleteLine(){
  poly.setMap();
  setMapOnAll();
  poly = new google.maps.Polyline({
  strokeColor: '#ff0000',
  strokeOpacity: 1.0,
  strokeWeight: 3
  });
}

最後，我們來建立一個重置的功能，
對折線來說，如果只是單單地將 .setMap()，這樣下次再點擊地圖時，
還是會將舊有的折線顯示出來，所以只能算把折線隱藏起來，
但我們想要的重置應該是完整的再建立出一條新的折線來，
所以我們需要讓 poly = new google.maps.Polyline({})
這樣就等於清空了折線中的內容，就完成了重置的設定囉！
趕快去體驗一下吧！

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

參考文件：
Google Map 官方文件