Google Maps API - 形狀( 圓形、矩形)

圓形設定Circle Options · map：指定要放在哪個地圖上，如果沒有設定，可以再用setMap 的方法把圓形放到地圖裡。

· center：圓形的圓心，使用一組經緯度座標表示。

· radius： ... ARCHIVE ABOUT CONTACT Designthinkingiseverywhere GoogleMapsAPI-形狀(圓形、矩形) 圓形和矩形在GoogleMapsAPI裡的設定比較有固定規則，有別於折線和多邊形，是使用陣列來標記座標點，圓形是用中心點和半徑，矩形則是兩個點(四個邊)，這篇就來把這兩種形狀放到地圖上。

起手式 圓形：的建構函式為Circle，使用一組LatLng座標來指定圓心，半徑則是以公尺為單位表現，下列CircleOptions的部分是相關屬性設定。

varcircle=newgoogle.maps.Circle(CircleOptions) 矩形：的建構函式為Rectangle，使用兩組LatLng座標來指定兩個端點(四個邊)，下列RectangleOptions的部分是相關屬性設定。

varrectangle=newgoogle.maps.Rectangle(RectangleOptions) 圓形設定CircleOptions map：指定要放在哪個地圖上，如果沒有設定，可以再用setMap的方法把圓形放到地圖裡。

center：圓形的圓心，使用一組經緯度座標表示。

radius：圓形的半徑，單位是「公尺」。

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，透過滑鼠就可以更改圓形大小。

圓形方法CircleMethods setMap(Map)：設定地圖，將圓形放到指定的地圖上，如果設定的值為null，則會移除圓形。

setDraggable(boolean)：設定是否可以拖曳圓形，true可以，false不可以。

setEditable(boolean)：設定是否可以編輯圓形，true可以，false不可以。

setOptions(CircleOptions)：重新設定圓形。

setCenter(center)：設定圓形圓心，用法等同CircleOptions。

setRadius(radius)：設定圓形半徑，用法等同CircleOptions。

setVisible(boolean)：設定圓形是否可見，true可以，false不可以。

getDraggable()：獲取圓形是否可以拖曳的狀態。

getEditable()：獲取圓形是否可以編輯的狀態。

getMap()：獲取圓形所在地圖。

getBounds()：獲取圓形上下左右四個端點的座標。

getCenter()：獲取圓形的圓心座標。

getRadius()：獲取圓形的半徑。

getVisible()：獲取圓形是否可見的狀態。

圓形事件CircleEvents click：滑鼠點擊。

dblclick：滑鼠連點兩下。

center_changed：圓心發生改變。

radius_changed：半徑發生改變。

drag：拖曳多邊形。

dragend：拖曳多邊形結束。

dragstart：拖曳多邊形開始。

mousedown：按下滑鼠。

mouseup：放開放開。

mousemove：移動滑鼠。

mouseout：滑鼠移出多邊形外。

mouseover：滑鼠移到多邊形內。

rightclick：滑鼠右鍵點擊。

知道圓形的用法之後，可以在地圖上指定相對應的座標化圓，並搭配標記marker，實現不同數值有不同半徑大小的圓形，下面的範例先用一個position陣列放座標經緯度，然後num是半徑的基準數值，實際呈現時會乘以10。

範例：在Google地圖畫圓形 varmap; varposition=[{ lat:25.0336962, lng:121.5643673 },{ lat:25.036518, lng:121.562546 },{ lat:25.033164, lng:121.557472 }]; varnum=[10,20,30]; varcircle=[]; varmarker=[]; functioninitMap(){ map=newgoogle.maps.Map(document.getElementById('map'),{ zoom:16, center:position[1] }); position.forEach(function(e,i){ circle[i]=newgoogle.maps.Circle({ center:e, radius:num[i]*10, strokeOpacity:0, fillColor:'#f00', fillOpacity:0.35, map:map }); marker[i]=newgoogle.maps.Marker({ position:e, map:map, label:num[i].toString() }); }); } 矩形設定RectangleOptions 矩形和圓形大同小異，扣除圓形的center和radius其他都相同，這邊就僅列出不同的部分。

bounds：設定矩形north、south、east和west的座標，換句話說也就是指定四個邊的線段經緯度。

矩形方法RectangleMethods 除了圓形的setCenter(center)、setRadius(radius)、getCenter()和getRadius()其他都相同，這邊僅列出不同的部分。

setBounds(Bounds)：設定座標。

getBounds()：獲得座標。

矩形事件RectangleEvents 除了圓形的center_changed和radius_changed其他都相同，這邊僅列出不同的部分。

bounds_changed：當矩形的端點發生改變。

下方是矩形的簡單範例，在地圖上放置矩形，並讓矩形的端點可以編輯。

範例：在Google地圖畫圓形 varmap; functioninitMap(){ map=newgoogle.maps.Map(document.getElementById('map'),{ zoom:17, center:{ lat:25.0336962, lng:121.5643673 } }); varrect=newgoogle.maps.Rectangle({ bounds:{ north:25.034962, south:25.033115, east:121.565422, west:121.563523 }, strokeOpacity:0, fillColor:'#00f', fillOpacity:0.35, editable:true, map:map }); } 參考資料： GoogleMapsAPI形狀 Circleclass Rectangleclass BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO