Google Maps API - 形狀 ( 圓形、矩形 )
圓形和矩形在 Google Maps API 裡的設定比較有固定規則，有別於折線和多邊形，是使用陣列來標記座標點，圓形是用中心點和半徑，矩形則是兩個點 ( 四個邊 )，這篇就來把這兩種形狀放到地圖上。
起手式
圓形：的建構函式為 Circle，使用一組 LatLng 座標來指定圓心，半徑則是以公尺為單位表現，下列 CircleOptions 的部分是相關屬性設定。
var circle = new google.maps.Circle(CircleOptions)
矩形：的建構函式為 Rectangle，使用兩組 LatLng 座標來指定兩個端點 ( 四個邊 )，下列 RectangleOptions 的部分是相關屬性設定。
var rectangle = new google.maps.Rectangle(RectangleOptions)
圓形設定 Circle Options
- 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，透過滑鼠就可以更改圓形大小。
圓形方法 Circle Methods
- 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()：獲取圓形是否可見的狀態。
圓形事件 Circle Events
- click：滑鼠點擊。
- dblclick：滑鼠連點兩下。
- center_changed：圓心發生改變。
- radius_changed：半徑發生改變。
- drag：拖曳多邊形。
- dragend：拖曳多邊形結束。
- dragstart：拖曳多邊形開始。
- mousedown：按下滑鼠。
- mouseup：放開放開。
- mousemove：移動滑鼠。
- mouseout：滑鼠移出多邊形外。
- mouseover：滑鼠移到多邊形內。
- rightclick：滑鼠右鍵點擊。
知道圓形的用法之後，可以在地圖上指定相對應的座標化圓，並搭配標記 marker，實現不同數值有不同半徑大小的圓形，下面的範例先用一個 position 陣列放座標經緯度，然後 num 是半徑的基準數值，實際呈現時會乘以 10。
var map;
var position = [{
lat: 25.0336962,
lng: 121.5643673
}, {
lat: 25.036518,
lng: 121.562546
}, {
lat: 25.033164,
lng: 121.557472
}];
var num = [10, 20, 30];
var circle = [];
var marker = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: position[1]
});
position.forEach(function(e, i) {
circle[i] = new google.maps.Circle({
center: e,
radius: num[i] * 10,
strokeOpacity: 0,
fillColor: '#f00',
fillOpacity: 0.35,
map: map
});
marker[i] = new google.maps.Marker({
position: e,
map: map,
label: num[i].toString()
});
});
}
矩形設定 Rectangle Options
矩形和圓形大同小異，扣除圓形的center和radius其他都相同，這邊就僅列出不同的部分。
- bounds：設定矩形 north、south、east 和 west 的座標，換句話說也就是指定四個邊的線段經緯度。
矩形方法 Rectangle Methods
除了圓形的setCenter(center)、setRadius(radius)、getCenter()和getRadius()其他都相同，這邊僅列出不同的部分。
- setBounds(Bounds)：設定座標。
- getBounds()：獲得座標。
矩形事件 Rectangle Events
除了圓形的center_changed和radius_changed其他都相同，這邊僅列出不同的部分。
- bounds_changed：當矩形的端點發生改變。
下方是矩形的簡單範例，在地圖上放置矩形，並讓矩形的端點可以編輯。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {
lat: 25.0336962,
lng: 121.5643673
}
});
var rect = new google.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
});
}
