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