谷歌地图v3 – 限制可视区域和缩放级别

是否有可能将Google地图v3限制在某个区域? 我想只允许显示一些区域(例如一个国家),并禁止用户在别处滑动。 此外,我想限制缩放级别 – 例如只在级别6和9之间。我想使用所有的基本地图types。

有没有办法做到这一点?

我通过使用StyledMap来限制缩放级别已经取得了部分成功,但是我成功的只限于ROADMAP,我无法通过这种方式限制其他基本types的缩放。

感谢您的帮助

您可以聆听dragend事件,如果地图被拖动到允许的范围之外,请将其移回到里面。 您可以在LatLngBounds对象中定义允许的边界,然后使用contains()方法检查新的lat / lng中心是否在边界内。

您也可以非常容易地限制缩放级别。

考虑下面的例子: Fiddle Demo

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div id="map" style="width: 400px; height: 300px;"></div> <script type="text/javascript"> // This is the minimum zoom level that we'll allow var minZoomLevel = 5; var map = new google.maps.Map(document.getElementById('map'), { zoom: minZoomLevel, center: new google.maps.LatLng(38.50, -90.50), mapTypeId: google.maps.MapTypeId.ROADMAP }); // Bounds for North America var strictBounds = new google.maps.LatLngBounds( new google.maps.LatLng(28.70, -127.50), new google.maps.LatLng(48.85, -55.90) ); // Listen for the dragend event google.maps.event.addListener(map, 'dragend', function() { if (strictBounds.contains(map.getCenter())) return; // We're out of bounds - Move the map back within the bounds 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)); }); // Limit the zoom level google.maps.event.addListener(map, 'zoom_changed', function() { if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel); }); </script> </body> </html> 

从上面的例子截图。 在这种情况下,用户将无法拖动到更远的南方或远东。

Google Maps JavaScript API v3示例:强制停止地图拖动

限制缩放级别的更好方法可能是使用minZoom / maxZoom选项而不是对事件作出反应?

 var opt = { minZoom: 6, maxZoom: 9 }; map.setOptions(opt); 

或者可以在映射初始化时指定选项,例如:

 var map = new google.maps.Map(document.getElementById('map-canvas'), opt); 

请参阅: Google Maps JavaScript API V3参考

限制v.3 +上的缩放。 在您的地图设置中添加默认缩放级别,minZoom或maxZoom(或两者,如果需要)缩放级别为0到19.如果需要限制,您必须声明deafult缩放级别。 都是区分大小写的!

 function initialize() { var mapOptions = { maxZoom:17, minZoom:15, zoom:15, .... 

限制范围的更好的方法…使用上面海报的包含逻辑。

 var dragStartCenter; google.maps.event.addListener(map, 'dragstart', function(){ dragStartCenter = map.getCenter(); }); google.maps.event.addListener(this.googleMap, 'dragend', function(){ if (mapBounds.contains(map.getCenter())) return; map.setCenter(this.dragStart); }); 

这可以用来将地图重新​​定位到特定位置。 这是我所需要的。

  var MapBounds = new google.maps.LatLngBounds( new google.maps.LatLng(35.676263, 13.949096), new google.maps.LatLng(36.204391, 14.89038)); google.maps.event.addListener(GoogleMap, 'dragend', function () { if (MapBounds.contains(GoogleMap.getCenter())) { return; } else { GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825)); } }); 
 myOptions = { center: myLatlng, minZoom: 6, maxZoom: 9, styles: customStyles, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

这是我的变种解决可视区域限制的问题。

  google.maps.event.addListener(this.map, 'idle', function() { var minLat = strictBounds.getSouthWest().lat(); var minLon = strictBounds.getSouthWest().lng(); var maxLat = strictBounds.getNorthEast().lat(); var maxLon = strictBounds.getNorthEast().lng(); var cBounds = self.map.getBounds(); var cMinLat = cBounds.getSouthWest().lat(); var cMinLon = cBounds.getSouthWest().lng(); var cMaxLat = cBounds.getNorthEast().lat(); var cMaxLon = cBounds.getNorthEast().lng(); var centerLat = self.map.getCenter().lat(); var centerLon = self.map.getCenter().lng(); if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon)) { //We can't position the canvas to strict borders with a current zoom level self.map.setZoomLevel(self.map.getZoomLevel()+1); return; } if(cMinLat < minLat) var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2); else if(cMaxLat > maxLat) var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2); else var newCenterLat = centerLat; if(cMinLon < minLon) var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2); else if(cMaxLon > maxLon) var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2); else var newCenterLon = centerLon; if(newCenterLat != centerLat || newCenterLon != centerLon) self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon)); }); 

strictBoundsnew google.maps.LatLngBounds()types的对象。 self.gmap存储一个Google Map对象( new google.maps.Map() )。

它确实有效,但是如果你的边界覆盖了它,不仅忘记考虑与第0经络和相似的痔疮。

因为某些原因

 if (strictBounds.contains(map.getCenter())) return; 

没有为我工作(也许南半球问题)。 我不得不改变它:

  function checkBounds() { 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 > maxX || y < minY || y > maxY) { 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)); } } 

希望它能帮助别人。

一个解决scheme就是,如果你知道特定的经纬度。

 google.maps.event.addListener(map, 'idle', function() { map.setCenter(new google.maps.LatLng(latitude, longitude)); map.setZoom(8); }); 

如果没有特定的经纬度

 google.maps.event.addListener(map, 'idle', function() { map.setCenter(map.getCenter()); map.setZoom(8); }); 

要么

 google.maps.event.addListener(map, 'idle', function() { var bounds = new google.maps.LatLngBounds(); map.setCenter(bounds.getCenter()); map.setZoom(8); }); 

截至2016年中 ,没有官方的方式来限制可视区域。 大多数限制边界的特设解决scheme都有一个缺陷,因为它们并没有严格限制边界以适合地图视图,而只是在地图中心超出指定范围的情况下才限制边界。 如果你想限制像我这样覆盖图像的边界,这可能会导致如下图所示的行为,其中下面的地图在我们的图像覆盖图下可见:

在这里输入图像描述

为了解决这个问题,我创build了一个库 ,它成功地限制了边界,所以你不能从覆盖层中移出。

但是,作为其他现有的解决scheme,它有一个“振动”的问题。 当用户足够积极地平移地图时,在释放鼠标左键之后,地图仍然继续自行平移,逐渐放缓。 我总是将地图返回到边界,但这会导致一种震动。 这个平移效果目前无法用Js API提供的任何方式来停止。 看来,直到谷歌增加了像map.stopPanningAnimation()的支持,我们将无法创造一个平稳的体验。

使用提到的库的例子,我能够得到最平滑的边界体验:

 function initialise(){ var myOptions = { zoom: 5, center: new google.maps.LatLng(0,0), mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById('map'), myOptions); addStrictBoundsImage(map); } function addStrictBoundsImage(map){ var bounds = new google.maps.LatLngBounds( new google.maps.LatLng(62.281819, -150.287132), new google.maps.LatLng(62.400471, -150.005608)); var image_src = 'https://developers.google.com/maps/documentation/' + 'javascript/examples/fullhttp://img.dovov.comtalkeetna.png'; var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map); } 
 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("maps", "3",{other_params:"sensor=false"}); </script> <body style="margin:0px; padding:0px;" onload="initialise()"> <div id="map" style="height:400px; width:500px;"></div> <script type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script> </body> 

这可能会有所帮助。

  var myOptions = { center: new google.maps.LatLng($lat,$lang), zoom: 7, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

缩放级别可以根据需要进行定制。