谷歌地圖v3 - 限制可視區域和縮放級別

112

你可以聽dragend事件，如果地圖拖動允許的範圍以外，將其移回內部。您可以在LatLngBounds對象中定義允許的邊界，然後使用方法檢查新的緯度/經度中心是否在邊界內。

您還可以非常輕鬆地限制縮放級別。

考慮下面的例子：從上面的例子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>

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

限制縮放級別

Google Maps JavaScript API v3 Example: Force stop map dragging

來源

2010-09-29 00:44:19

+2

該決定看起來不乾淨。爲什麼'if（x maxX）x = maxX;'不排除對方？爲什麼您將畫布放在minX/maxX和maxX/maxY座標上，儘管它們不是中心的座標？ – 2012-08-19 11:06:08

+1

而不是'dragend'事件，您可以在地圖實例（[工作示例]（http://jsfiddle.net/32pc6f5v/））上使用'draggable：false'） – machineaddict 2014-09-24 11:43:35

+0

這不是使用「zoom_changed」事件的好技術限制用戶。因爲第一次它總是會超出最低等級，然後使用你的代碼，所以你再次設置最小縮放，這將使屏幕變得更加簡單。 – 2015-07-16 04:50:56

164

更好的辦法可能是使用了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 Reference

來源

2011-03-04 18:42:25 ChrisV

+2

現在這無疑是限制縮放級別的最佳方式。在我撰寫帖子時，該功能未出現在Maps API v3中。謝天謝地，他們不斷改進API。 – Tomik 2011-03-05 23:14:16

+2

這很好，這應該是縮放的最佳答案。 – paullb 2011-12-23 04:23:35

+3

這應該被標記爲僅針對所選答案的人的答案。 – ErJab 2012-03-30 22:43:33

3

更好的方法來限制範圍...使用的含有從上面的海報邏輯。

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

來源

2012-01-27 19:27:50 Pat

+0

爲什麼爲第二個偵聽器添加'this.googleMap'而不是'map'？也不應該'dragStart'是'dragStartCenter'嗎？最後是什麼'mapBounds'？ – hobbes3 2012-02-02 21:07:51

+2

當然，所有這一切都是阻止用戶在一次拖動中拖到遠處？他們仍然可以製造很多小拖拽，最終到達任何地方，不是嗎？ – James 2012-07-02 15:03:36

0

這是我的變體，以解決可視區域的限制問題。

 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()類型的一個對象。 self.gmap存儲Google地圖對象（new google.maps.Map()）。

它確實有效，但如果你的邊界覆蓋了它們，不僅忘記考慮穿越第0經絡和平行線的痔瘡。

來源

2012-08-19 12:48:44

+0

接受Daniel Vassallo的算法對我無法正常工作。這裏有幾個主要的區別。 – 2012-08-19 12:51:57

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

希望它會幫助別人。

來源

2012-11-22 04:06:22 Mayko

-4

這可能對您有幫助。

var myOptions = { 
     center: new google.maps.LatLng($lat,$lang), 
     zoom: 7, 
     disableDefaultUI: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

縮放級別可以根據需要定製。

來源

2013-04-18 06:37:09

+0

這並沒有解決將縮放級別限制在一個範圍內的原始問題。只在級別6和9之間，它設置*默認*縮放級別並刪除默認UI（即'+'/'-'），這有點矯枉過正。 – Alastair 2013-10-05 18:30:48

0

一個解決方案就像是，如果你知道具體的緯度/經度。

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

});

來源

2013-09-03 04:04:58 Jaison

6

要限制在3.0版+變焦。在您的地圖設置中添加默認縮放級別和minZoom或maxZoom（或兩者，如果需要）縮放級別爲0到19. 如果需要限制，您必須聲明deafult縮放級別。都是區分大小寫的！

function initialize() { 
    var mapOptions = { 
     maxZoom:17, 
     minZoom:15, 
     zoom:15, 
     ....

來源

2013-12-08 10:53:21

1

這可用於將地圖重新居中到特定位置。這是我需要的。

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

來源

2014-02-27 09:36:10

2

myOptions = { 
     center: myLatlng, 
     minZoom: 6, 
     maxZoom: 9, 
     styles: customStyles, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

來源

2015-06-04 06:29:14 Anup

+0

這不回答這個問題。 – 2015-10-14 01:27:06

0

作爲中間2016，有限制可視區域沒有官方途徑。大多數限制界限的臨時解決方案都存在缺陷，因爲它們不會嚴格限制界限以適應地圖視圖，而只是在地圖中心超出指定界限時纔會限制界限。如果你想限制的範圍，以覆蓋圖像像我這樣的，這可能會導致行爲像如下圖所示，在墊層圖是我們的圖像疊加下可見：

爲了解決這個問題，我有創建了一個library，它成功地限制了界限，因此您無法移出覆蓋圖。

但是，作爲其他現有的解決方案，它有一個「振動」的問題。當用戶足夠積極地平鋪地圖時，在釋放鼠標左鍵後，地圖仍然繼續自行平移，逐漸放緩。我總是將地圖返回到邊界，但這會導致一些震動。此平移效果目前無法用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){ 
 
\t var bounds = new google.maps.LatLngBounds(
 
\t \t new google.maps.LatLng(62.281819, -150.287132), 
 
\t \t new google.maps.LatLng(62.400471, -150.005608)); 
 

 
\t var image_src = 'https://developers.google.com/maps/documentation/' + 
 
\t \t 'javascript/examples/full/images/talkeetna.png'; 
 

 
\t 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()"> 
 
\t <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>

該庫還能夠自動計算最小縮放制約。然後使用minZoom映射的屬性限制縮放級別。

希望這可以幫助那些想要解決方案的人完全尊重給定的界限，並且不想讓他們擺脫困境。

來源

2016-06-10 18:19:36

谷歌地圖v3 - 限制可視區域和縮放級別

回答

相關問題