Google Maps API - 形狀 ( 多邊形 Polygon )
使用 Google Mpas API 在 地圖上繪製多邊形跟繪製折線一樣簡單，換句話說只要把折線填滿，就變成了多邊形，折線使用 Polyline 形狀是 Polygon，多邊形可以點擊的區域也比折線大得多，這篇就來探討一下如何在地圖上繪製多邊形吧！
繪製多邊形起手式
Polygon 建構函式使用一組指定多邊形 LatLng 座標的 Paths，以及一組調整折線視覺行為的樣式，下列 PolygonOptions 的部分是相關屬性設定。
var polygonPath = new google.maps.Polygon(PolygonOptions)
多邊形設定 Polygon Options
上面起手式的 PolygonOptions 是多邊形的設定，這些設定有以下幾種：
- map：指定要放在哪個地圖上，如果沒有設定，可以再用 setMap 的方法把多邊形放到地圖裡。
- path：多邊形的路徑，使用陣列來表示，每個陣列元素是經緯度的物件，必須包含對應的經緯度座標才能繪製。
- paths：多邊形的路徑，使用二維陣列來表示，表示有幾個形狀組合在一起，比較有趣的是，如果外圈是順時針，內圈是逆時針，組合起來的圖形就會變成「交集」的方式呈現。( 後面會有實例介紹 )
- fillColor：多邊形填滿的顏色。
- fillOpacity：多邊形填滿的透明度，0.0 ~ 1.0 之間，越接近 0 表示越透明。
- strokeColor：多邊形外框線條的顏色。
- strokeWeight：多邊形外框線條寬度，使用 pixel 表示。
- strokeOpacity：多邊形外框線條透明度，0.0 ~ 1.0 之間，越接近 0 表示越透明。
strokePosition：多邊形外框線條是在的位置，有三種選項，「CENTER」表示線條的中線貼齊多邊形邊緣，「INSIDE」表示線條最外緣貼齊多邊形最外緣 ( 線條在形狀內 )，「OUTSIDE」表示線條的最內緣貼齊多邊形最外緣 ( 線條在形狀外 )。
strokePosition: google.maps.StrokePosition.選項- zIndex：多邊形階層，數字越大在越上面。
- visible：是否可以看見多邊形，預設值 true，如果設定 false 就看不見。
- clickable：是否可以點擊多邊形，預設值 true，如果設為 false 則不能點擊。
- draggable：是否可以拖曳邊多邊形，預設值為 false，如果設為 true，則可以把整個多邊形拖曳到別的地方 ( 如果是要個別修改形狀邊緣的點，可以使用 editable )。
- editable：是否可以編輯多邊形邊緣上的每個點，預設值為 false，如果設為 true，在多邊形邊緣上就會出現可以拖曳的圓點標記，透過滑鼠就可以更改每個點的位置。
- geodesic：是否要依照「地球弧度」繪製多邊形，預設值為 flase，表示一律採「直線」顯示，若設定為 true，在地圖縮小到一定比例， 類似可以在同個畫面看到完整的台灣，就會看到多邊形邊緣變成「弧線」，因為地球本身是橢圓形，所以如果有看過飛機航線就知道，航線都會是弧線顯示 ( 在地球表面，最短的距離不是直線，是弧線 )。
舉例來說，下面這段程式碼執行後，會看到一個紅色的愛心框住台北 101，在邊緣上的點都可以用滑鼠去拖曳修改位置，如果仔細看，因為多邊形的 strokePosition 設為 CENTER，所以會看到邊緣重疊在多邊形上。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {
lat: 25.0336962,
lng: 121.5643673
}
});
var polygonPathPoints = [
{lat: 25.032474, lng: 121.564714},
{lat: 25.033018, lng: 121.563534},
{lat: 25.034477, lng: 121.562954},
{lat: 25.035157, lng: 121.563330},
{lat: 25.035157, lng: 121.563941},
{lat: 25.034622, lng: 121.564617},
{lat: 25.035147, lng: 121.565390},
{lat: 25.035021, lng: 121.565958},
{lat: 25.034341, lng: 121.566237},
{lat: 25.033252, lng: 121.565915}
];
var polygonPath = new google.maps.Polygon({
paths: polygonPathPoints,
strokeColor: '#0c0',
strokeOpacity: .5,
strokeWeight: 20,
strokePosition: google.maps.StrokePosition.CENTER,
fillColor: '#f00',
fillOpacity: 0.35,
map:map
});
}
會畫愛心之後，回頭看一下剛剛提到 path 和 paths 的差異，如果使用 paths，表示我們可以使用多個多邊形，而多邊形外框的方向，決定了多邊形是否會做「交集」，如果順時針的多邊形在外，逆時針的多邊形在內，就可以繪製出「甜甜圈」外觀的造型，下面的例子，是使用三組多邊形來做交集，可以看到框住 101 的愛心中間多了個正方形的洞，然後還有另外一個三角形貫穿其中。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {
lat: 25.0336962,
lng: 121.5643673
}
});
var polygonPathPoints = [
{lat: 25.032474, lng: 121.564714},
{lat: 25.033018, lng: 121.563534},
{lat: 25.034477, lng: 121.562954},
{lat: 25.035157, lng: 121.563330},
{lat: 25.035157, lng: 121.563941},
{lat: 25.034622, lng: 121.564617},
{lat: 25.035147, lng: 121.565390},
{lat: 25.035021, lng: 121.565958},
{lat: 25.034341, lng: 121.566237},
{lat: 25.033252, lng: 121.565915}
];
var p2 =[
{lat: 25.034302, lng: 121.563748},
{lat: 25.033427, lng: 121.563823},
{lat: 25.033407, lng: 121.565218},
{lat: 25.034272, lng: 121.565154}
];
var p3 =[
{lat: 25.034234, lng: 121.562418},
{lat: 25.033524, lng: 121.564896},
{lat: 25.034049, lng: 121.564724}
];
var polygonPath = new google.maps.Polygon({
paths: [polygonPathPoints, p2, p3],
strokeColor: '#000',
strokeOpacity: 1,
strokeWeight: 3,
strokePosition: google.maps.StrokePosition.CENTER,
fillColor: '#f00',
fillOpacity: 0.35,
editable: true,
map:map
});
}
多邊形方法 Polygon Methods
Polygon 除了有以上的設定外，也有下列這些方法可以使用：
- setMap(Map)：設定地圖，將多邊形放到指定的地圖上，如果設定的值為 null，則會移除多邊形。
- setDraggable(boolean)：設定是否可以拖曳多邊形，true 可以，false 不可以。
- setEditable(boolean)：設定是否可以編輯折多邊形，true 可以，false 不可以。
- setOptions(PolylineOptions)：重新設定多邊形。
- setPath(path)：設定多邊形，path 用法等同 PolygonOptions。
- setPaths(paths)：設定多邊形，paths 用法等同 PolygonOptions。
- setVisible(boolean)：設定多邊形是否可見，true 可以，false 不可以。
- getDraggable()：獲取多邊形是否可以拖曳的狀態。
- getEditable()：獲取多邊形是否可以編輯的狀態。
- getMap()：獲取多邊形所在地圖。
- getPath()：獲取多邊形路徑。
- getPaths()：獲取多邊形路徑。
- getVisible()：獲取多邊形是否可見的狀態。
多邊形事件 Polygon Events
多邊形也可以使用 addListener 監聽事件，事件有以下幾種：
- click：滑鼠點擊。
- dblclick：滑鼠連點兩下。
- drag：拖曳多邊形。
- dragend：拖曳多邊形結束。
- dragstart：拖曳多邊形開始。
- mousedown：按下滑鼠。
- mouseup：放開放開。
- mousemove：移動滑鼠。
- mouseout：滑鼠移出多邊形外。
- mouseover：滑鼠移到多邊形內。
- rightclick：滑鼠右鍵點擊。
透過 Polygon 的方法與事件，可以簡單做出「當滑鼠移到多邊形上就變綠色，按下滑鼠就變藍色」的效果。
polygonPath.addListener('mouseover',function(){
this.setOptions({
fillColor:'#0a0'
});
});
polygonPath.addListener('mouseout',function(){
this.setOptions({
fillColor:'#f00'
});
});
polygonPath.addListener('mousedown',function(){
this.setOptions({
fillColor:'#00a'
});
});
polygonPath.addListener('mouseup',function(){
this.setOptions({
fillColor:'#0a0'
});
});
