栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Google Maps v3-限制可见区域和缩放级别

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Google Maps v3-限制可见区域和缩放级别

您可以听

dragend
事件,如果将地图拖到允许的范围之外,请将其移回内部。您可以在
LatLngBounds
对象中定义允许的范围,然后使用该
contains()
方法检查新的经纬度中心是否在范围内。

您也可以非常轻松地限制缩放级别。

考虑以下示例:

[Fiddle Demo](http://jsfiddle.net/cse_tushar/9d4jy4ye/)

<!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" ></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>

上面示例的屏幕截图。在这种情况下,用户将无法向南或向东拖动:



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442153.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号