Google Maps API - 繪製折線 ( Polyline )

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

繪製折線起手式

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

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

折線設定 Polyline Options

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

舉例來說,下面這段程式碼執行後,會看到一條由四個點所組成的綠色折線 ( 起始點在台北 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()的方法,其實折線還包含了以下其他的方法:

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

範例:折線方法

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 事件,除了這兩者,折線還包含了以下幾種事件:

小結

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

有興趣瞧瞧其他新文章嗎?