JS－Google Map API 研究一下

Google Map API的手冊寫的很全，比如看這個Simple Map的例子，很快就能顯示一張地圖。

而最近因為參加一個Open Data的比賽，項目需要用到一些Google map額外的功能，比如畫圖，我打算邊研究邊做個紀錄。

列一下功能表

基本：

顯示地圖，定位到某一個點，縮放至合適的大小。
可以在地圖上畫出一個範圍，我稱作園地，這個園地需要有個顏色。
將這個園地，用座標記錄下來。
重新顯示地圖的時候，可以將畫過的園地顯示在正確的位置上。
導入一個帶圖的KML資料，顯示在地圖上。

加強部分：

提供搜索框，可以輸入地址來定位。

基本功能實現

1、顯示地圖、定位地圖以及縮放

參考Google Map Simple Map

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

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 Tools

畫圖工具除了Google Map意外還需要引用庫drawing

Google Map API

實現代碼：

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

});

$(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的功能。

	      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
	      ]

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。

google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) {
	      var coordinates = (polyline.getPath().getArray());
	      alert(coordinates);
	      // console.log(coordinates);
	   });

google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) {

var coordinates = (polyline.getPath().getArray());

alert(coordinates);

// console.log(coordinates);

});

獲得座標的方式不太一樣，比如Rectangle是調用.getBunds();

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(Rectangle) {
	      var coordinates = (Rectangle.getBounds());
	      alert(coordinates);
	   });

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(Rectangle) {

var coordinates = (Rectangle.getBounds());

alert(coordinates);

});

給園地上色：

通過Listener，給園地設定個顏色：

	  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
	      var coordinates = (polygon.getPath().getArray());
	      polygon.setOptions({fillColor:'#FF0000'});
	      alert(coordinates);
	  });

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畫上去。

	// 我的農地座標
	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);

// 我的農地座標

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資料外網訪問不了(比如放在自己的筆記本上，也沒對外開放訪問)，都會無法正常顯示。

	    // 顯示KML圖
	    var ctaLayer = new google.maps.KmlLayer({
    		url: 'http://odrain.devdon.com/odrain-450mm.kml'
  		});
  		ctaLayer.setMap(map);

// 顯示KML圖

var ctaLayer = new google.maps.KmlLayer({

url: 'http://odrain.devdon.com/odrain-450mm.kml'

});

ctaLayer.setMap(map);

上面就是我需要的效果，讓使用者可以畫出一塊園地，然後丟上kml淹水潛勢圖，很清楚的可以知道園地有多少範圍在不同的降雨量下會淹水。

加強功能實現

1、通過輸入地址來定位地圖

JS－Google Map API 研究一下

列一下功能表

基本功能實現

1、顯示地圖、定位地圖以及縮放

2 & 3、畫圖以及紀錄座標

4、根據已保存的座標顯示出園地

5、導入帶KML圖的資料

加強功能實現

相關

發表迴響取消回覆

列一下功能表

基本功能實現

1、顯示地圖、定位地圖以及縮放

2 & 3、畫圖以及紀錄座標

4、根據已保存的座標顯示出園地

5、導入帶KML圖的資料

加強功能實現

分享此文：

相關

發表迴響 取消回覆

發表迴響取消回覆