設置界限映射

Question

我正在尋找一種方法來設置周圍使用JavaScript

是這種類型的事情，即使在API中支持谷歌地圖API V3中的特定城市/城鎮邊界？

基本上我不希望我的用戶能夠跨越地圖進一步轉移城市，包括國家地區的城市範圍。

Answer 1

以及你想提供給城市/城鎮的邊界是可以做到的。您只需繪製指定城市邊界座標的多義線或多邊形。
訪問 demos and documentation for overlays in Gmap V3

請嘗試以下代碼以限制用戶在該區域進行平移。

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

這將限制用戶在北美

Answer 2

1. 使用map.fitBounds()或map.setCenter()將地圖上的城市/國家/地區設爲中心。
2. 使用draggable: false選項禁用平移。

Answer 3

的區域平移您需要獲得積分全市boundries，那麼你就可以創建一個折線。例如，一個想法可能與此類似：

limitCoord = [ 
    new google.maps.LatLng(42.49956716,-7.019005501), 
    new google.maps.LatLng(42.49947126,-7.029286373), 
    new google.maps.LatLng(42.50904062,-7.049299123), 
    new google.maps.LatLng(42.50722622,-7.069103626), 
    new google.maps.LatLng(42.50452387,-7.000150672), 
    new google.maps.LatLng(42.49348015,-6.983058917), 
    new google.maps.LatLng(42.49843269,-6.971666546), 
    new google.maps.LatLng(42.51765791,-6.956909023), 
    new google.maps.LatLng(42.52010069,-6.927429186), 
    new google.maps.LatLng(42.50992238,-6.914231493), 
    new google.maps.LatLng(42.50096695,-6.879679821), 
    new google.maps.LatLng(42.48775868,-6.857775832), 
    new google.maps.LatLng(43.23907504,-3.293216584)], "#000000", 5); 

var boundries = new google.maps.Polyline({ 
    path: limitCoord, 
    strokeColor: "#000000", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
});