google map api 新手教學,請安心服用。
本篇系列紀錄為 w3cgoogleapi 上的學習心得記錄,
google map 很好用,真的要學起來~
若您對 googlemap 基本應用還不熟,
建議可以先看本系列第一篇 GoogleMapAPI - Basic
延續上篇(Basic)地圖載入後,我們可以利用 setMap 將設定好的點、線、面
劃記載入至地圖中。
以下為實作:定位點、路徑、多邊形、實心圓、訊息等標記劃記。
Marker(定位標記)
定義一個點位置
var myCenter = new google.maps.LatLng(24.1504536, 120.6830641);
建立 Maker
var marker = new google.maps.Marker({
position: myCenter,
//animation: google.maps.Animation.DROP,
animation: google.maps.Animation.BOUNCE,
icon: 'images/point.png',
});
- position:擺放欲標記的點位。
- animation:標記時的動畫,有 BOUNCE、DROP。
- icon:自訂標記圖示(若無則預設)。
將 Marker 加入至地圖
marker.setMap(map);
結果如下圖
Polyline(線段路徑)
定義任意三點作為移動路徑,並以陣列方式儲存。
var p1 = new google.maps.LatLng(24.1504536, 120.6830641);
var p2 = new google.maps.LatLng(24.1505063, 120.6834567);
var p3 = new google.maps.LatLng(24.1510675, 120.6832118);
var p = [p1, p2, p3];
建立 Polyline
var path = new google.maps.Polyline({
path: p,
strokeColor: '#0000ff',
strokeOpacity: 0.8,
strokeWeight: 2
});
- path:路徑陣列
- strokeColor:框線顏色
- strokeOpacity:框線透明度
- strokeWeight:框線粗細
將 Polyline 加入至地圖中
path.setMap(map);
結果如下圖
Polygon(多邊形)
定義多邊形點
var po1 = new google.maps.LatLng(24.150473, 120.6818724);
var po2 = new google.maps.LatLng(24.1506442, 120.6824873);
var po3 = new google.maps.LatLng(24.1502305, 120.6825238);
var po4 = new google.maps.LatLng(24.1501782, 120.6816066);
var po = [po1, po2, po3, po4];
建立多邊形
var polygon = new google.maps.Polygon({
path: po,
strokeColor: '#00ff00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00ff00',
fillOpacity: 0.4
});
- path:路徑陣列
- strokeColor:框線顏色
- strokeOpacity:框線透明度
- strokeWeight:框線粗細
- fillColor:內容顏色
- fillOpacity:內容透明度
將 Polygon 加入至地圖中
polygon.setMap(map);
結果如下圖
Circle 實心圓
定義圓心點
var cir = new google.maps.LatLng(24.1492271, 120.6833525);
建立一個圓心圖物件
var cicrcle = new google.maps.Circle({
center: cir,
radius: 500,
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.4
});
- center:圓心點
- radius:半徑
- strokeColor:框線顏色
- strokeOpacity:框線透明度
- strokeWeight:框線粗細
- fillColor:內容顏色
- fillOpacity:內容透明度
將圓心圖加入至地圖中
cicrcle.setMap(map);
結果如下圖
InfoWindow(訊息視窗)
建立訊息視窗內容
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!'
});
- contentr:訊息
將訊息視窗加入至指定點,我們加入剛剛的 marker
PS. 記得要先劃記好 marker
infowindow.open(map,marker)
結果如下圖
以上為基本的地圖劃記功能~
有勘誤之處,不吝指教。ob'_'ov