Google Maps 覆蓋層
Google Maps - 覆蓋層
覆蓋層是地圖上的物件，它們繫結到經緯度座標。
Google Maps 有幾種型別的覆蓋層
- 標記 - 地圖上的單個位置。標記還可以顯示自定義圖示影像
- 折線 - 地圖上的一系列直線
- 多邊形 - 地圖上的一系列直線，並且形狀是“封閉的”
- 圓形和矩形
- 資訊視窗 - 在地圖頂部顯示一個彈出氣球中的內容
- 自定義覆蓋層
Google Maps - 新增標記
Marker 建構函式建立一個標記。請注意，必須設定 position 屬性才能顯示標記。
使用 setMap() 方法將標記新增到地圖
示例
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - 動畫標記
下面的示例演示如何使用 animation 屬性為標記新增動畫
示例
var marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - 圖示而非標記
下面的示例指定使用影像（圖示）而不是預設標記
示例
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - 折線
Polyline 是在有序序列中的一系列座標繪製的線。
折線支援以下屬性
- path - 為線指定多個經緯度座標
- strokeColor - 為線指定十六進位制顏色（格式：“#FFFFFF”）
- strokeOpacity - 指定線的透明度（0.0 到 1.0 之間的值）
- strokeWeight - 以畫素為單位指定線的描邊粗細
- editable - 定義線是否可由使用者編輯（true/false）
示例
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - 多邊形
Polygon 類似於 Polyline，因為它由有序序列中的一系列座標組成。但是，多邊形設計用於定義閉環內的區域。
多邊形由直線組成，並且形狀是“封閉的”（所有直線都連線在一起）。
多邊形支援以下屬性
- path - 為線指定多個 LatLng 座標（第一個和最後一個座標相等）
- strokeColor - 為線指定十六進位制顏色（格式：“#FFFFFF”）
- strokeOpacity - 指定線的透明度（0.0 到 1.0 之間的值）
- strokeWeight - 以畫素為單位指定線的描邊粗細
- fillColor - 為封閉區域內的區域指定十六進位制顏色（格式：“#FFFFFF”）
- fillOpacity - 指定填充顏色的透明度（0.0 到 1.0 之間的值）
- editable - 定義線是否可由使用者編輯（true/false）
示例
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - 圓形
圓形支援以下屬性
- center - 指定圓心的 google.maps.LatLng
- radius - 指定圓的半徑（以米為單位）
- strokeColor - 為圓形周圍的線指定十六進位制顏色（格式：“#FFFFFF”）
- strokeOpacity - 指定描邊顏色的透明度（0.0 到 1.0 之間的值）
- strokeWeight - 以畫素為單位指定線的描邊粗細
- fillColor - 為圓形內的區域指定十六進位制顏色（格式：“#FFFFFF”）
- fillOpacity - 指定填充顏色的透明度（0.0 到 1.0 之間的值）
- editable - 定義圓形是否可由使用者編輯（true/false）
示例
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - 資訊視窗
為標記顯示帶有某些文字內容的資訊視窗
示例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
