Google Maps API - 在折線裡加入符號 ( symbols )

在地圖上繪製折線的同時,往往也少不了符號 ( icons 或 symbols ) 的輔助,這篇將會介紹使用 illustrator 製作符號,再透過 Google Maps API 把自己繪製的符號加入折線裡,做出帶有箭頭或其他圖案的折線,或是在 Google 地圖上繪製虛線。

使用 Illustrator 繪製符號

一般來說要單純「寫程式碼」畫出圖形,除非你是萬中無一的武功高手才有辦法 ( 基本上是不可能 ),剛好自己很熟 Illustrator,所以我就直接透過 Illustrator 來繪製向量圖形作為符號使用,要使用 Illustrator 繪製有幾個小地方要注意。

熟悉這些小細節之後,接下來應該就是考驗繪製圖形的功力了,這裡我就「簡單」畫個三角形,放在畫布的左上角,並將三角形的中心點對齊 (0,0) 的位置,最後輸出為 SVG,就可以準備進行下一步驟了。

帶有箭頭的折線

回想一下在 Google Maps (6) - 設計地圖標記圖案 有提到更換標記的方法,在折線上也是如法炮製,這裡先使用 Google 官方提供的 symbols 來測試,在折線上顯示符號,需要先設定 PolylineOptions 的 icons 屬性,icons 屬性有三個:

舉例來說,下面這段程式碼,將會在地圖上呈現一個 10px 粗的折線,折線的終點會有個箭頭圖案。

範例:帶有箭頭的折線 - symbols

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 iconPath = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };

  var polylinePath = new google.maps.Polyline({
    path: polylinePathPoints,
    strokeColor: '#000',
    strokeOpacity: 0.8,
    strokeWeight: 10,
    icons: [{
      icon: iconPath,
      offset: '100%',
      scale: 10
    }],
    map:map
  });

}

如果要使用自己設計的符號更好 ( 坦白說覺得官方的五種 symbols 都有點醜 ),透過 Illustrator 我簡單畫了一個三角形,輸出為 SVG 之後的路徑為M-44.6,22.3L0-22.3l44.6,44.6H-44.6z,這時只要把剛剛的 iconPath 改成下列這段程式碼,執行後就會看到自己畫的三角形出現在折線的終點。( 需要注意的是,圖案的 fillOpacity 預設為 0,如果要呈現色彩則必須設定該屬性 )

範例:帶有箭頭的折線 - 自己繪製的符號

var iconPath = {
  path: 'M-44.6,22.3L0-22.3l44.6,44.6H-44.6z',
  fillColor: '#f00',
  fillOpacity: 0.7,
  strokeOpacity: 0,
  scale:1
};

在折線裡使用不同的符號

如果要在一條折線裡使用不同的符號,只需要定義各個符號的形狀和樣式,然後依序添加到 icons 的陣列裡就可以,例如下面的程式碼,就會在折線裡添加三個不同形狀的符號。

範例:在折線裡使用不同的符號

var iconPath1 = {
  path: 'M-44.6,22.3L0-22.3l44.6,44.6H-44.6z',
  fillColor: '#f00',
  fillOpacity: 0.7,
  strokeOpacity: 0,
  scale:.8
};

var iconPath2 = {
  path: 'M0-27.9L9.1-9.5l20.3,2.9L14.7,7.7l3.5,20.2L0,18.4l-18.1,9.5l3.5-20.2L-29.3-6.6l20.3-2.9L0-27.9z',
  fillColor: '#fa0',
  fillOpacity: 0.7,
  strokeOpacity: 0,
  scale:1
};

var iconPath3 = {
  path: 'M15.6,0L7.8,13.5H-7.8L-15.6,0l7.8-13.5H7.8L15.6,0z',
  fillColor: '#09c',
  fillOpacity: 0.7,
  strokeOpacity: 0,
  scale:1.6
};

var polylinePath = new google.maps.Polyline({
  path: polylinePathPoints,
  strokeColor: '#000',
  strokeOpacity: 0.8,
  strokeWeight: 10,
  icons: [{
    icon: iconPath1,
    offset: '0'
  },{
    icon: iconPath2,
    offset: '50%'
  },{
    icon: iconPath3,
    offset: '100%'
  }],
  map:map
});

沿著線段跑的符號動畫

如果會使用setInterval,甚至可以做到讓符號沿著折線移動的動畫,簡單來說只需要透過 setOptions 來改變 offset,就能辦到動畫效果。

範例:沿著線段跑的符號動畫

setInterval(function(){
  a = a + 1;
  if(a>100){
    a = 0;
  }
  polylinePath.setOptions({
    icons:[{
      icon: iconPath,
      offset: a + '%'
    }]
  })
},20);

在 Google 地圖上畫虛線

Google 地圖裡的線段是沒有虛線選項的,但既然符號裡有個 repeat 的屬性,就可以透過重複的符號,來實現虛線的線段,首先繪製一個帶有圓角的矩形,就很像是一個長長的膠囊形狀,然後將其轉為複合路徑的 SVG ( 目的在於取得 path )。

為了不讓原本的實心折線影響,先把 strokeOpacity 設為 0,接著調整 scale 和 repeat,就能夠做出漂亮的虛線了,如果覺得折線轉彎處不好看,亦可調整 offset 的數值修正。

範例:在 Google 地圖上畫虛線

var iconPath = {
  path: 'M0,3.8L0,3.8c-0.8,0-1.4-0.6-1.4-1.4v-4.7c0-0.8,0.6-1.4,1.4-1.4h0c0.8,0,1.4,0.6,1.4,1.4v4.7C1.4,3.1,0.8,3.8,0,3.8z',
  fillColor: '#f00',
  fillOpacity: 1,
  strokeOpacity: 0,
  scale:3
};

var polylinePath = new google.maps.Polyline({
  path: polylinePathPoints,
  strokeColor: '#000',
  strokeOpacity: 0,
  strokeWeight: 1,
  icons: [{
    icon: iconPath,
    offset: '15px',
    repeat:'30px'
  }],
  map:map
}); 

小結

以上大概就是透過「符號 + 折線」所做出來的一些應用,光是這些應用,應該就能夠讓原本的地圖,增添許多不同的創意囉!

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