雲端教學課程
Google map API
這簡報在
第一步,直接搜尋
Google map api

(看不懂英文的話右下角可以切換語言,但還是要練習看)
照Getting Started流程走
註冊API權限

啟用google map api

建立金鑰
在你會用到這服務的地方帶上金鑰,google就會知道是你

練習:複製範例程式碼貼上
將台灣調整於地圖正中央

疊加層

新增一個marker在台中市
並且試一下HTML5的Geolocation定位、Info windows

折線

事件
教學頁
完整的事件清單
練習:用click event畫折線
當點擊到地圖時觸發一個事件
google.maps.event.addListener(map, 'click', function(event) {
console.log(event);
});
解答
var flightPlanCoordinates = [ new google.maps.LatLng(24.25,120.7), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2, editable: true });
google.maps.event.addListener(map, 'click', function(event) {
console.log(event); flightPlanCoordinates.push(event.latLng); flightPath.setMap(null); flightPath.setMap(map); });
Code Samples
還有更多程式碼範例,有空可以去研究。
標記太多的處理方式
Library
Google map API
By jackai
Google map API
- 2,139