谷歌地图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>
从上面的例子截图。 在这种情况下，用户将无法拖动到更远的南方或远东。
限制缩放级别的更好方法可能是使用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)); });
strictBounds是new 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 };
缩放级别可以根据需要进行定制。
