Google Maps API - 繪製折線 ( Polyline )

「折線」是 Google 地圖裡最基本的一種「形狀」，折線顧名思義就是可以幫助我們在地圖上繪製直線，繪製的方法需使用 Google Maps API 的 Polyline 建構函式，只要在裡頭設定對應的座標陣列和一些設定，就能輕輕鬆鬆在地圖上繪製。

繪製折線起手式

Polyline 建構函式使用一組指定線條 LatLng 座標的 Path，以及一組調整折線視覺行為的樣式，下列 PolylineOptions 的部分是相關屬性設定。

var polylinePath = new google.maps.Polyline(PolylineOptions)

折線設定 Polyline Options

從起手式中可以看到 PolylineOptions，這是折線的設定，這些設定有以下幾種：

• map：指定要放在哪個地圖上，如果沒有設定，可以再用 setMap 的方法把折線放到地圖裡。

• path：折線的路徑，使用陣列來表示，每個陣列元素是經緯度的物件，必須包含對應的經緯度座標才能繪製。

• icons：折線上每個座標的圖示，使用陣列來表示，如果沒有 icon 則不會有圖案顯示。
• strokeColor：折線線條的顏色。
• strokeOpacity：折線的線條透明度，0.0 ~ 1.0 之間，越接近 0 表示越透明。
• strokeWeight：折線的線條寬度，使用 pixel 表示。
• zIndex：折線的階層，數字越大在越上面。
• visible：是否可以看見折線，預設值 true，如果設定 false 就看不見折線。
• clickable：是否可以點擊折線，預設值 true，如果設為 false 則不能點擊。
• draggable：是否可以拖曳折線，預設值為 false，如果設為 true，則可以把整個線段形狀拖曳到別的地方 ( 如果是要個別修改折線上的點，可以使用 editable )。
• editable：是否可以編輯折線上的每個點，預設值為 false，如果設為 true，在折線上就會出現可以拖曳的圓點標記，透過滑鼠就可以更改每個點的位置。
• geodesic：是否要依照「地球弧度」繪製折線，預設值為 flase，表示一律採「直線」顯示，若設定為 true，在地圖縮小到一定比例， 類似可以在同個畫面看到完整的台灣，就會看到折線變成「弧線」，因為地球本身是橢圓形，所以如果有看過飛機航線就知道，航線都會是弧線顯示 ( 在地球表面，最短的距離不是直線，是弧線 )。

舉例來說，下面這段程式碼執行後，會看到一條由四個點所組成的綠色折線 ( 起始點在台北 101 )，而折線上的點都可以用滑鼠去拖曳修改位置。

範例：折線設定

var map;
var position = {
  lat: 25.0336962,
  lng: 121.5643673
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: position
  });

  var polylinePathPoints = [
    {lat: 25.0336962, lng: 121.5643673},
    {lat: 25.033755, lng: 121.565412},
    {lat: 25.031985, lng: 121.565380},
    {lat: 25.032083, lng: 121.561324}
  ];
  var polylinePath = new google.maps.Polyline({
    path: polylinePathPoints,
    geodesic: true,
    strokeColor: '#008800',
    strokeOpacity: 0.8,
    strokeWeight: 20,
    editable: true,
    geodesic: false,
    draggable: false
  });

  polylinePath.setMap(map);

}

折線方法 Polyline Methods

在上面的範例中，看到了一個setMap()的方法，其實折線還包含了以下其他的方法：

• setMap(Map)：設定地圖，將折線放到指定的地圖上，如果設定的值為 null，則會移除折線。
• setDraggable(boolean)：設定是否可以拖曳折線，true 可以，false 不可以。
• setEditable(boolean)：設定是否可以編輯折線，true 可以，false 不可以。
• setOptions(PolylineOptions)：重新設定折線。
• setPath(path)：設定折線路徑，path 用法等同 PolylineOptions。
• setVisible(boolean)：設定折線是否可見，true 可以，false 不可以。
• getDraggable()：獲取折線是否可以拖曳的狀態。
• getEditable()：獲取折線是否可以編輯的狀態。
• getMap()：獲取折線所在地圖。
• getPath()：獲取折線的路徑。
• getVisible()：獲取折線是否可見的狀態。

舉例來說，下面這段程式碼執行後，當我們用滑鼠拖曳折線，就會看到折線變成紅色，拖曳完成放開滑鼠後，折線又會恢復綠色。

範例：折線方法

var map;
var position = {
  lat: 25.0336962,
  lng: 121.5643673
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: position
  });

  var polylinePathPoints = [
    {lat: 25.0336962, lng: 121.5643673},
    {lat: 25.033755, lng: 121.565412},
    {lat: 25.031985, lng: 121.565380},
    {lat: 25.032083, lng: 121.561324}
  ];
  var polylinePath = new google.maps.Polyline({
    path: polylinePathPoints,
    geodesic: true,
    strokeColor: '#008800',
    strokeOpacity: 0.8,
    strokeWeight: 20,
    editable: true,
    geodesic: false,
    draggable: true
  });

  polylinePath.setMap(map);

  polylinePath.addListener('drag',function(){
    this.setOptions({
      strokeColor: '#ff0000'
    });
  });

  polylinePath.addListener('dragend',function(){
    this.setOptions({
      strokeColor: '#008800'
    });
  });

}

折線事件 Polyline Events

在上面的範例裡的折線，有用到addListener監聽 drag 和 dragend 事件，除了這兩者，折線還包含了以下幾種事件：

• click：滑鼠點擊。
• dblclick：滑鼠連點兩下。
• drag：拖曳折線。
• dragend：拖曳折線結束。
• dragstart：拖曳折線開始。
• mousedown：按下滑鼠。
• mouseup：放開放開。
• mousemove：移動滑鼠。
• mouseout：滑鼠移出折線外。
• mouseover：滑鼠移到折線內。
• rightclick：滑鼠右鍵點擊。

小結

折線在 Google 地圖裡也是疊加層的一種，這篇只是單純介紹折線的用法，未來如果熟悉了更多的用法，相信就能在地圖上做出各種有趣的變化了。