代码之家 › 专栏 › 技术社区 › hsz

强制停止地图拖动[复制]

google-maps-api-3 google-maps javascript

hsz · 技术社区 · 14 年前

这个问题已经有了答案:

How do I limit panning in Google maps API V3? 14答

我正在和 Google Maps 现在,我希望能够禁止用户将地图拖出指定的边界。

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.00, 14.07),
    new google.maps.LatLng(54.50, 24.09)
);

我该怎么办?我试着用 drag 但没有运气……

google.maps.event.addListener(map, 'drag', function() {
    if (
         !strictBounds.contains(map.getBounds().getNorthEast())
      || !strictBounds.contains(map.getBounds().getSouthWest())
    ) {
        // map is out of bounds here
    }
});

如何停止用户的拖动 strictBounds ?

3 回复 | 直到 10 年前

Halvor Holsten Strand mtorres 10 年前

您可能希望听取 dragend event,如果将地图拖到允许的边界之外,请将其移回内部。很好,您使用的是 lat lng bound s >a>object to define your bound s,because you will be able to use the contains(). method,which returns true if the given lat/lng argument is within the boundedS.P/P>

您可能还应该限制缩放级别,因为通过缩小,用户仍然可以“看到”边界外的地图。

因此,您可能需要尝试以下示例:


   
    
     
      
      
     
    
    
     
      <!文档类型HTML>
& HTML& GT;
&头;
<meta http equiv=“content type”content=“text/html;charset=utf-8”/>gt;
<title>谷歌地图javascript API v3示例:限制平移</title>
<script type=“文本/javascript”
src=“http://maps.google.com/maps/api/js?sensor=false“></script>
和/头& GT;
和身体;
<div id=“map”style=“width:400px;height:300px;”></div>

<script type=“text/javascript”>

var minzoomlevel=5;

var map=new google.maps.map(document.getElementByID('map'),。{
缩放:MinZoomLevel,
中心:new google.maps.latlng(38.50,-90.50)
maptypeid:google.maps.maptypeid.roadmap
(});

//北美边界
var stricterbounds=new google.maps.latlngbounds(
新的google.maps.latlng(28.70,-127.50)
新google.maps.latlng(48.85,-55.90));

//监听dragend事件
google.maps.event.addListener(map,'dragend',function()){
if(strictBounds.contains(map.getcenter())返回;

//越界-将地图移回边界内

var c=map.getcenter(),
x= C.LNG-()
Y= C LATE()
maxx=strictBounds.getNortheast().lng(),
maxy=strictBounds.getNortheast().lat(),
minx=strictBounds.get西南().lng(),
miny=strictBounds.get西南().lat();

如果(x<minx)x=minx;
如果(x>maxx)x=maxx;
如果(y<miny)y=miny;
如果(y>maxy)y=maxy;

map.setcenter(新google.maps.latlng(y,x));
(});

//限制缩放级别
google.maps.event.addListener(map,'zoom_changed',function()。{
if(map.getzoom()<minzoomlevel)map.setzoom(minzoomlevel);
(});

& /脚本& GT;
和/身体;
& lt//html & gt;
< /代码> 

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


下界,把它移回里面。你用的是LatLngBounds对象定义边界,因为您可以使用contains()方法,如果给定的lat/lng参数在界限内,则返回true。

您可能还应该限制缩放级别,因为通过缩小,用户仍然可以“看到”边界外的地图。

因此,您可能需要尝试以下示例:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Limit Panning</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"> 

   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;

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


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

Okeydoke 14 年前

试试这个:

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.00, 14.07),
    new google.maps.LatLng(54.50, 24.09)
);

google.maps.event.addListener(map, 'drag', function() {

    if (!strictBounds.intersects(map.getBounds()) ) {
        // map is out of bounds here
        map.setCenter(strictBounds.getCenter()); 
    }
});

它不太理想,因为它只是将地图中心移回严格的边界中心,理想情况下,您将尝试计算它们试图拖动通过的边界的最近边缘。它也有点慢,因为它们已经超出了界限,但这是API的一个问题。

eecue 14 年前

这是可行的,尽管有点紧张:

//  Boundaries
var southBound = 33;
var westBound = -119;
var northBound = 34;
var eastBound = -118;

// Intersect boxes for stopping drag
var topBox = new google.maps.LatLngBounds(
    new google.maps.LatLng(northBound, westBound),
    new google.maps.LatLng(northBound + 1, eastBound)
);
var rightBox = new google.maps.LatLngBounds(
    new google.maps.LatLng(southBound, eastBound),
    new google.maps.LatLng(northBound, eastBound + 1)
);
var bottomBox = new google.maps.LatLngBounds(
    new google.maps.LatLng(southBound - 1, westBound),
    new google.maps.LatLng(southBound, eastBound)
);
var leftBox = new google.maps.LatLngBounds(
    new google.maps.LatLng(southBound, westBound - 1),
    new google.maps.LatLng(northBound, westBound)
);

// Last known good center point
var lastGoodCenter = map.getCenter();

// Listen for dragging  
google.maps.event.addListener(map, 'drag', function() {
    // If the map's bounds intersect with one of the stop boxes
    if (map.getBounds().intersects(topBox) || map.getBounds().intersects(rightBox) 
        || map.getBounds().intersects(bottomBox) || map.getBounds().intersects(leftBox)){
        // Go back to the good center
        map.setCenter(lastGoodCenter);
    }else{
        // Or set this new center as good
        lastGoodCenter = map.getCenter();
    }
});