強制停止地圖拖動

我現在與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用戶的拖累？

來源

2010-07-07 hsz

您可能想要聽dragend事件，而如果地圖被拖出超出允許範圍，將其移回到裏面。使用LatLngBounds對象來定義邊界是很好的，因爲您可以使用方法，如果給定的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>

截圖。用戶將不能夠在這種情況下，再往南或遠東拖動：

Google Maps JavaScript API v3 Example: Force stop map dragging

來源

2010-07-08 13:46:48

感謝您的回答。我注意到了這種方式（但沒有計算）。但是如果他拖得更多，它仍然會允許用戶看到地圖的其他部分。我正在尋找一種方式，在他嘗試訪問地圖的禁止區域的同一時刻打破用戶的拖動。 – hsz 2010-07-08 16:34:35

@hsz：在這種情況下，您可能想要聽'drag'事件而不是'dragend'，但阻止看起來不會很好。你可能更喜歡使用'panTo'而不是'setCenter'。 – 2010-07-08 16:57:22

試試這個：

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()); 
    } 
});

它不是很在其剛移動地圖中心回strictBounds中心，理想的情況是你想嘗試的理想，並計算出他們試圖拖動邊界的最近的邊緣過去。它也有點慢，趕上他們拖出界限，但這是一個問題與API

來源

2010-07-07 23:02:55 Okeydoke

我試過'setCenter'已經但是它會導致如果用戶不結束拖動地圖，則不平滑移動。 – hsz 2010-07-08 07:57:09

這工作，雖然這是一個有點神經質：

// 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(); 
    } 
});

來源

2010-10-20 02:27:23 eecue

使用panTo而不是setCenter會更平滑，但會顯示您不想顯示的部分地圖。 =] – eecue 2010-10-20 02:31:39

強制停止地圖拖動

回答

相關問題