分類  >  Web前端 >

Google Maps API V3學習【限制map縮放級別和顯示範圍 包含V2版本程序】

tags:    時間:2013-12-10 21:53:50
Google Maps API V3學習【限制地圖縮放級別和顯示範圍 包含V2版本程序】

google map V2:

自定義地圖縮放範圍:

控制地圖的縮放級別範圍需要重載GMapType的getMinimumResolution()和getMaximumResolution()方法。下面的代碼將地圖的縮放級別設置為12-16。

 function setMapResolution()  {      //獲取所有地圖類型      var mapTypes = map.getMapTypes();      //對所有地圖類型限制縮放級別     for(var i=0; i<mapTypes.length; i++)      {          mapTypes[i].getMinimumResolution = function() { return 12; };          mapTypes[i].getMaximumResulution = function() { return 16; };      }  }
 

 

 

 

然後在載入地圖后調用此函數就可以將地圖的縮放級別限制為12-16。

自定義地圖的顯示範圍:

限制地圖的顯示範圍稍微複雜一些。首先使用GLatLngBounds定義一個地圖的範圍。在地圖拖動或移動后判斷地圖的中心是否移出限制的範圍。如果超出範圍則移動地圖到限制範圍內。

 

 

 //限制地圖的顯示範圍  function checkMapBounds(map, mapRange)  {       if(map)      {           if(mapRange.contains(map.getCenter()))           {               return;           }                var center = map.getCenter();          var centerX = center.lng();          var centerY = center.lat();             var maxX = mapRange.getNorthEast().lng();          var maxY = mapRange.getNorthEast().lat();          var minX = mapRange.getSouthWest().lng();          var minY = mapRange.getSouthWest().lat();           if(centerX < minX) { centerX = minX; }          if(centerX > maxX) { centerX = maxX; }          if(centerY < minY) { centerY = minY; }          if(centerY > maxY) { centerY = maxY; }                    map.panTo(new google.maps.LatLng(centerY, centerX));      }  }

  然後將此方法綁定到dragend事件。在每次地圖拖動結束時判斷當前位置是否在限制範圍之內。

 

 //設置地圖顯示範圍  google.maps.Event.addListener(map, 'dragend', function(){      checkMapBounds(map, mapRangeBound);  });
 

google map V3:

 

var minZoomLevel = 4; var map = new google.maps.Map(document.getElementById('map'), { 	zoom: minZoomLevel, 	center: new google.maps.LatLng(35.570335826274345, 106.53511059863281), 	mapTypeId: google.maps.MapTypeId.ROADMAP });   //自定義地圖縮放範圍 google.maps.event.addListener(map, 'zoom_changed', function() { 	if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); });   //自定義地圖的顯示範圍:中國區域內部 var strictBounds = new google.maps.LatLngBounds( 	new google.maps.LatLng(14.48003790418668, 66.28120434863283),  	new google.maps.LatLng(54.44617552862156, 143.71284497363283 )); google.maps.event.addListener(map, 'dragend', function() { 	if (strictBounds.contains(map.getCenter())) return; 	var c = map.getCenter(), 	x = c.lng(), 	y = c.lat(), 	maxX = strictBounds.getNorthEast().lng(), 	maxY = strictBounds.getNorthEast().lat(), 	minX = strictBounds.getSouthWest().lng(), 	minY = strictBounds.getSouthWest().lat(); 	if (x < minX) x = minX; 	if (x > maxX) x = maxX; 	if (y < minY) y = minY; 	if (y > maxY) y = maxY; 	map.setCenter(new google.maps.LatLng(y, x)); });
1 樓 指尖旋律 2010-11-04  
前段時間整研究這個,標記個。
2 樓 houfeng0923 2011-06-04  
不錯。正要用。

推薦閱讀文章

Bookmark the permalink ,來源:互聯網