by
Google Map API的手冊寫的很全，比如看這個Simple Map的例子，很快就能顯示一張地圖。
而最近因為參加一個Open Data的比賽，項目需要用到一些Google map額外的功能，比如畫圖，我打算邊研究邊做個紀錄。
列一下功能表
基本：
- 顯示地圖，定位到某一個點，縮放至合適的大小。
- 可以在地圖上畫出一個範圍，我稱作園地，這個園地需要有個顏色。
- 將這個園地，用座標記錄下來。
- 重新顯示地圖的時候，可以將畫過的園地顯示在正確的位置上。
- 導入一個帶圖的KML資料，顯示在地圖上。
加強部分：
- 提供搜索框，可以輸入地址來定位。
基本功能實現
1、顯示地圖、定位地圖以及縮放
|
1 2 3 4 5 6 7 8 9 |
var map; function initialize() { map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 8, center: {lat: -34.397, lng: 150.644} }); } google.maps.event.addDomListener(window, 'load', initialize); |
通過調整cengter座標可以將地圖定位，而Zoom則是放大程度，越大拉的越進。
2 & 3、畫圖以及紀錄座標
畫圖工具除了Google Map意外還需要引用庫drawing
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing“></script>
實現代碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
$(document).ready(function(){ var map; var drawingManager; function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8 }; map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE ] }, circleOptions: { fillColor: '#ffff00', fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1 } }); google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) { var coordinates = (polyline.getPath().getArray()); alert(coordinates[0]['A']); // console.log(coordinates); }); drawingManager.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); }); |
其中DrawingManager就是用來顯示出畫圖工具的。
DrawingModes中有很多可選參數，比如畫直線、圓圈、放進Marker的功能。
|
1 2 3 4 5 6 7 |
drawingModes: [ google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE ] |
獲得座標：
請參考Google Map API Drawing Manager中 DrawingManager class Events的部分。
通過addListener可以在用戶畫好圖的時候取得座標array。
|
1 2 3 4 5 |
google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) { var coordinates = (polyline.getPath().getArray()); alert(coordinates); // console.log(coordinates); }); |
獲得座標的方式不太一樣，比如Rectangle是調用.getBunds();
|
1 2 3 4 |
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(Rectangle) { var coordinates = (Rectangle.getBounds()); alert(coordinates); }); |
給園地上色：
通過Listener，給園地設定個顏色：
|
1 2 3 4 5 |
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { var coordinates = (polygon.getPath().getArray()); polygon.setOptions({fillColor:'#FF0000'}); alert(coordinates); }); |
4、根據已保存的座標顯示出園地
參考Google Map Simple polygon
事先準備好座標，呈現地圖的時候就把polygon畫上去。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 我的農地座標 var farmArea = [ new google.maps.LatLng(-33.817948227414966, 150.96038818359375), new google.maps.LatLng(-33.88466740785102, 150.9906005859375), new google.maps.LatLng(-33.88694748406899, 150.919189453125), new google.maps.LatLng(-33.92968762757659, 150.9912872314453), new google.maps.LatLng(-33.9786699406944, 150.9246826171875), new google.maps.LatLng(-33.944499207394635, 151.0517120361328), new google.maps.LatLng(-33.97183689217048, 151.18629455566406), new google.maps.LatLng(-33.92342041437841, 151.0997772216797), new google.maps.LatLng(-33.89207743274474, 151.18560791015625), new google.maps.LatLng(-33.881817226884806, 151.09291076660156), new google.maps.LatLng(-33.819659626496865, 151.14852905273438) ]; // 畫出我的農地 myFarm = new google.maps.Polygon({ paths: farmArea, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); myFarm.setMap(map); |
5、導入帶KML圖的資料
將KML資料喂給GoogleMap。
這裏url要注意的是，如果少了http://會認不出來，如果kml資料外網訪問不了(比如放在自己的筆記本上，也沒對外開放訪問)，都會無法正常顯示。
|
1 2 3 4 5 |
// 顯示KML圖 var ctaLayer = new google.maps.KmlLayer({ url: 'http://odrain.devdon.com/odrain-450mm.kml' }); ctaLayer.setMap(map); |
上面就是我需要的效果，讓使用者可以畫出一塊園地，然後丟上kml淹水潛勢圖，很清楚的可以知道園地有多少範圍在不同的降雨量下會淹水。
加強功能實現
1、通過輸入地址來定位地圖