Google Maps API - 在折線裡加入符號 ( symbols )
在地圖上繪製折線的同時，往往也少不了符號 ( icons 或 symbols ) 的輔助，這篇將會介紹使用 illustrator 製作符號，再透過 Google Maps API 把自己繪製的符號加入折線裡，做出帶有箭頭或其他圖案的折線，或是在 Google 地圖上繪製虛線。
使用 Illustrator 繪製符號
一般來說要單純「寫程式碼」畫出圖形，除非你是萬中無一的武功高手才有辦法 ( 基本上是不可能 )，剛好自己很熟 Illustrator，所以我就直接透過 Illustrator 來繪製向量圖形作為符號使用，要使用 Illustrator 繪製有幾個小地方要注意。
座標系統：畫布的左上角為 (0,0)，往上 y 為 -，往左 x 為 -，Google 地圖裡也是以這個座標作為符號的座標依據，如果畫在別的地方，最後呈現的位置也就會怪怪的。
![Google Maps API - 在折線裡加入符號 ( symbols )]()
複合路徑：由於繪製時封閉路徑會自動變成 polygon，正方形會自動變成 rect...等狀況，所以當我們畫完圖案之後，記得在圖案上按滑鼠右鍵，選擇「製作複合路徑」，轉換出來的形狀就會使用 path 呈現。
![Google Maps API - 在折線裡加入符號 ( symbols )]()
輸入 SVG：Illustrator 轉換 SVG 挺方便的，只要存檔時選擇 SVG 就可以，在儲存之前也有些設定可以選擇，如果不希望樣式獨立變成 style 呈現，打開「更多選項」，下拉選單選擇「樣式屬性」即可，如果只是單純想看 SVG 的程式碼，點選「SVG 程式碼」就可以查看最終的程式碼長相。
![Google Maps API - 在折線裡加入符號 ( symbols )]()
熟悉這些小細節之後，接下來應該就是考驗繪製圖形的功力了，這裡我就「簡單」畫個三角形，放在畫布的左上角，並將三角形的中心點對齊 (0,0) 的位置，最後輸出為 SVG，就可以準備進行下一步驟了。
帶有箭頭的折線
回想一下在 Google Maps (6) - 設計地圖標記圖案 有提到更換標記的方法，在折線上也是如法炮製，這裡先使用 Google 官方提供的 symbols 來測試，在折線上顯示符號，需要先設定 PolylineOptions 的 icons 屬性，icons 屬性有三個：
- icon：圖案路徑或是
google.maps.SymbolPath定義的圖案。 - offset：圖案起始位置，可以使用像素或百分比，百分比則是整條線段的百分比。
- repeat：重複的距離，可以使用像素或百分比，如果不要重複就不要設定或設定為 0。
舉例來說，下面這段程式碼，將會在地圖上呈現一個 10px 粗的折線，折線的終點會有個箭頭圖案。
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 的數值修正。
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
});
小結
以上大概就是透過「符號 + 折線」所做出來的一些應用，光是這些應用，應該就能夠讓原本的地圖，增添許多不同的創意囉！