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);