Google Maps API - 形狀( 多邊形Polygon )

上面起手式的PolygonOptions 是多邊形的設定，這些設定有以下幾種：. map：指定要放在哪個地圖上，如果沒有設定，可以再用setMap 的方法把多邊形放到地圖裡。

ARCHIVE ABOUT CONTACT Designthinkingiseverywhere GoogleMapsAPI-形狀(多邊形Polygon) 使用GoogleMpasAPI在地圖上繪製多邊形跟繪製折線一樣簡單，換句話說只要把折線填滿，就變成了多邊形，折線使用Polyline形狀是Polygon，多邊形可以點擊的區域也比折線大得多，這篇就來探討一下如何在地圖上繪製多邊形吧！ 繪製多邊形起手式 Polygon建構函式使用一組指定多邊形LatLng座標的Paths，以及一組調整折線視覺行為的樣式，下列PolygonOptions的部分是相關屬性設定。

varpolygonPath=newgoogle.maps.Polygon(PolygonOptions) 多邊形設定PolygonOptions 上面起手式的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，所以會看到邊緣重疊在多邊形上。

範例：在Google地圖繪製愛心多邊形 varmap; functioninitMap(){ map=newgoogle.maps.Map(document.getElementById('map'),{ zoom:17, center:{ lat:25.0336962, lng:121.5643673 } }); varpolygonPathPoints=[ {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} ]; varpolygonPath=newgoogle.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的愛心中間多了個正方形的洞，然後還有另外一個三角形貫穿其中。

範例：在Google地圖繪製愛心多邊形，中間還有個洞 varmap; functioninitMap(){ map=newgoogle.maps.Map(document.getElementById('map'),{ zoom:17, center:{ lat:25.0336962, lng:121.5643673 } }); varpolygonPathPoints=[ {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} ]; varp2=[ {lat:25.034302,lng:121.563748}, {lat:25.033427,lng:121.563823}, {lat:25.033407,lng:121.565218}, {lat:25.034272,lng:121.565154} ]; varp3=[ {lat:25.034234,lng:121.562418}, {lat:25.033524,lng:121.564896}, {lat:25.034049,lng:121.564724} ]; varpolygonPath=newgoogle.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 }); } 多邊形方法PolygonMethods 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()：獲取多邊形是否可見的狀態。

多邊形事件PolygonEvents 多邊形也可以使用addListener監聽事件，事件有以下幾種： click：滑鼠點擊。

dblclick：滑鼠連點兩下。

drag：拖曳多邊形。

dragend：拖曳多邊形結束。

dragstart：拖曳多邊形開始。

mousedown：按下滑鼠。

mouseup：放開放開。

mousemove：移動滑鼠。

mouseout：滑鼠移出多邊形外。

mouseover：滑鼠移到多邊形內。

rightclick：滑鼠右鍵點擊。

透過Polygon的方法與事件，可以簡單做出「當滑鼠移到多邊形上就變綠色，按下滑鼠就變藍色」的效果。

範例：在Google地圖繪製愛心多邊形，滑鼠點擊會變色 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' }); }); BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO