blocks|key|999076|text|诀窍是侦听dragend事件，如果地图被拖到允许的边界之外，则将其移回内部。如果将允许的界限定义为LatLngBounds对象，则可以使用contains()方法，因为如果给定的lat/lng参数在界限内，则该方法返回true。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|999077|限制缩放级别也很重要，但似乎您已经在这样做了。|999078|因此，您可能希望尝试以下示例：|999079|<!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+allowedBounds+=+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+(allowedBounds.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+=+allowedBounds.getNorthEast().lng(),
+++++++++maxY+=+allowedBounds.getNorthEast().lat(),
+++++++++minX+=+allowedBounds.getSouthWest().lng(),
+++++++++minY+=+allowedBounds.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>|code-block|syntax|javascript|999080|上面例子中的屏幕截图。在这种情况下，用户将无法进一步向南或向东拖动：|999081|​|999082|📷|atomic|999083|999084|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/96da417049efcd65092a9f8bbed9bbba.png|imageAlt^0|5|7|1D|C|1X|A|1D|C|0|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|F|3|G|5|6|7|1K|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1L|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1M|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1O|8|@]|D|@]|E|$]]|$1|S|3|T|5|U|7|1P|8|@]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|V|3|R|5|6|7|1T|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|15|10|16|E|$17|18|19|-4]]]]

<p>The trick is to listen to the <code>dragend</code> event, and if the map is dragged outside the allowed bounds, move it back inside. If you define your allowed bounds as a <a href="http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds" rel="noreferrer"><code>LatLngBounds</code></a> object, you can use the <code>contains()</code> method, since it returns true if the given lat/lng argument is within the bounds.</p>

<p>It is also important to limit the zoom level, but it seems you are already doing this.</p>

<p>Therefore, you may want to try the following example:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt; 
&lt;head&gt; 
   &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; 
   &lt;title&gt;Google Maps JavaScript API v3 Example: Limit Panning&lt;/title&gt; 
   &lt;script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt; 
   &lt;div id="map" style="width: 400px; height: 300px;"&gt;&lt;/div&gt; 

   &lt;script type="text/javascript"&gt; 

   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 allowedBounds = 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 (allowedBounds.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 = allowedBounds.getNorthEast().lng(),
         maxY = allowedBounds.getNorthEast().lat(),
         minX = allowedBounds.getSouthWest().lng(),
         minY = allowedBounds.getSouthWest().lat();

     if (x &lt; minX) x = minX;
     if (x &gt; maxX) x = maxX;
     if (y &lt; minY) y = minY;
     if (y &gt; 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() &lt; minZoomLevel) map.setZoom(minZoomLevel);
   });

   &lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;
</code></pre>

<p>Screenshot from the above example. The user will not be able to drag further south or far east in this case:</p>

<p><img src="https://i.imgur.com/3FvkTRH.png" alt="Google Maps JavaScript API v3 Example: Limit Panning"></p>


blocks|key|1213357|text|这是对the+above的一个很好的扩展，它可以通过监听dragstart事件将地图的中心重置到最后一个有效位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1213358|//+Limit+panning
var+lastCenter+=+map.getCenter();

google.maps.event.addListener(map,+'dragstart',+function()+{
++++lastCenter+=+map.getCenter();
});

google.maps.event.addListener(map,+'dragend',+function()+{
++++if(allowedBounds.contains(map.getCenter()))+return;

++++map.setCenter(lastCenter);
});|code-block|syntax|javascript|1213359|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3/3126754#3126754^0|3|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Here is a nice extension to <a href="https://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3/3126754#3126754">the above</a> that will reset the Map's center to the last valid position by listening to the dragstart event.</p>

<pre><code>// Limit panning
var lastCenter = map.getCenter();

google.maps.event.addListener(map, 'dragstart', function() {
    lastCenter = map.getCenter();
});

google.maps.event.addListener(map, 'dragend', function() {
    if(allowedBounds.contains(map.getCenter())) return;

    map.setCenter(lastCenter);
});
</code></pre>


blocks|key|1213399|text|我想我来派对有点晚了，但因为这正是我现在需要的，而且我对它有所改进，我想我还是发个答案吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1213400|有了Daniel+Vassallo和brendo的回答，用户仍然可以使用平移控制(如果它被激活)来离开想要的区域。@Yauhen.F在评论中提到的事情。|offset|length|1213401|因此，我不使用dragend事件，而是使用center_changed事件。在拖动过程中和每次有人使用平移控件时，都会连续触发此操作。|1213402|//+bounds+of+the+desired+area
var+allowedBounds+=+new+google.maps.LatLngBounds(
+++++new+google.maps.LatLng(70.33956792419954,+178.01171875),+
+++++new+google.maps.LatLng(83.86483689701898,+-88.033203125)
);
var+lastValidCenter+=+map.getCenter();

google.maps.event.addListener(map,+'center_changed',+function()+{
++++if+(allowedBounds.contains(map.getCenter()))+{
++++++++//+still+within+valid+bounds,+so+save+the+last+valid+position
++++++++lastValidCenter+=+map.getCenter();
++++++++return;+
++++}

++++//+not+valid+anymore+=>+return+to+last+valid+position
++++map.panTo(lastValidCenter);
});|code-block|syntax|javascript|1213403|通过在拖动过程中连续保存最后一个有效位置，移动将在超出边界时停止，而不是在拖动结束后返回。.|1213404|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3/3126754#3126754|1|https://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3/4241201#4241201^0|0|2|F|0|I|6|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]|$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>I guess I'm a little bit late to the party, but since this was exactly what I needed just now AND I improved on it, I thought I'd post an answer anyway.</p>

<p>With both the answers of <a href="https://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3/3126754#3126754">Daniel Vassallo</a> and <a href="https://stackoverflow.com/questions/3125065/how-do-i-limit-panning-in-google-maps-api-v3/4241201#4241201">brendo</a>, the user can still use the pan-control (if it's activated) to move away from the wanted area. The thing @Yauhen.F mentioned in a comment.</p>

<p>So instead of using the dragend event, I use the center_changed event. This is continuously fired during dragging and every time someone uses the pan control.</p>

<pre><code>// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(70.33956792419954, 178.01171875), 
     new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();

google.maps.event.addListener(map, 'center_changed', function() {
    if (allowedBounds.contains(map.getCenter())) {
        // still within valid bounds, so save the last valid position
        lastValidCenter = map.getCenter();
        return; 
    }

    // not valid anymore =&gt; return to last valid position
    map.panTo(lastValidCenter);
});
</code></pre>

<p>By saving the last valid position continuously during the dragging, the movement will just stop once it's out of bounds, instead of yerking back once the dragging ended.
......</p>


blocks|key|999232|text|在这个主题上有another+thread，这也很好。我必须解决的问题是，不是手动设置边界和检查中心是否包含，而是希望在页面加载时设置边界，然后在放大时允许拖动到边缘。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|999233|因此，我在地图加载时设置了平移边界一次。然后我检查地图是否仍处于最大缩放状态，如果是，则返回初始中心。如果放大，我希望平移到初始边界的边缘，而不仅仅是检查是否包含中心，因为这会将允许的平移扩展到视口的一半。|999234|不幸的是，虽然这可以完成工作，并且在缓慢平移时效果很好，但如果您快速平移，则会有一点抖动。|999235|如果你对如何避免这种情况有什么建议，我将不胜感激。|999236|++++map+=+new+google.maps.Map(+//+defaults
++++++++document.getElementById("map22"),
++++++++{
++++++++++++disableDefaultUI++++++++:+true,
++++++++++++zoomControl+++++++++++++:+true,
++++++++++++zoom++++++++++++++++++++:+7,
++++++++++++minZoom+++++++++++++++++:+7,
++++++++++++maxZoom+++++++++++++++++:+10,
++++++++++++center++++++++++++++++++:+new+google.maps.LatLng(
++++++++++++++++64.99473104134819,
++++++++++++++++-19.22332763671875
++++++++++++),
++++++++++++mapTypeId+++++++++++++++:+google.maps.MapTypeId.ROADMAP
++++++++}
++++);



++++function+borders(){
++++++++return+{
++++++++++++maxLat+:+map.getBounds().getNorthEast().lat(),
++++++++++++maxLng+:+map.getBounds().getNorthEast().lng(),
++++++++++++minLat+:+map.getBounds().getSouthWest().lat(),
++++++++++++minLng+:+map.getBounds().getSouthWest().lng(),
++++++++++++center+:+map.getCenter()
++++++++}
++++}

++++google.maps.event.addListenerOnce(map,'idle',function()+{
++++++++limit+=+borders();
++++});

++++google.maps.event.addListener(map,'drag',function()+{
++++++++if(map.getZoom()+==+7)+return+map.setCenter(limit.center);
++++++++current+=+borders();
++++++++if(+current.maxLng+<+limit.maxLng+&&+current.minLng+>+limit.minLng+)+activeCenterLng+=+current.center.lng();
++++++++if(+current.maxLat+<+limit.maxLat+&&+current.minLat+>+limit.minLat+)+activeCenterLat+=+current.center.lat();
++++++++map.setCenter(
++++++++++++new+google.maps.LatLng(
++++++++++++++++activeCenterLat,
++++++++++++++++activeCenterLng
++++++++++++)
++++++++);
++++});|code-block|syntax|javascript|999237|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3901611/google-maps-api-v3-limit-map-bounds^0|7|E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>There is <a href="https://stackoverflow.com/questions/3901611/google-maps-api-v3-limit-map-bounds">another thread</a> on the subject that is also very good. The problem I had to solve was that instead of setting boundaries manually and checking center containment, I wanted a boundary set on page load, then allow dragging to the edge if zoomed in.</p>

<p>So I set panning boundaries on map load, once.
Then I check if map is still at max zoom and if so, return the initial center.
If zoomed in, I want to pan to the EDGE of initial boundaries, not just check if CENTER contained, because that would extend the allowed panning by half the viewport.</p>

<p>Unfortunately, although this gets the job done and works fine when paning slowly, it's a bit jerky if you pan quickly.</p>

<p>If you have suggestions on how this can be avoided, I'd be grateful.</p>

<pre><code>    map = new google.maps.Map( // defaults
        document.getElementById("map22"),
        {
            disableDefaultUI        : true,
            zoomControl             : true,
            zoom                    : 7,
            minZoom                 : 7,
            maxZoom                 : 10,
            center                  : new google.maps.LatLng(
                64.99473104134819,
                -19.22332763671875
            ),
            mapTypeId               : google.maps.MapTypeId.ROADMAP
        }
    );



    function borders(){
        return {
            maxLat : map.getBounds().getNorthEast().lat(),
            maxLng : map.getBounds().getNorthEast().lng(),
            minLat : map.getBounds().getSouthWest().lat(),
            minLng : map.getBounds().getSouthWest().lng(),
            center : map.getCenter()
        }
    }

    google.maps.event.addListenerOnce(map,'idle',function() {
        limit = borders();
    });

    google.maps.event.addListener(map,'drag',function() {
        if(map.getZoom() == 7) return map.setCenter(limit.center);
        current = borders();
        if( current.maxLng &lt; limit.maxLng &amp;&amp; current.minLng &gt; limit.minLng ) activeCenterLng = current.center.lng();
        if( current.maxLat &lt; limit.maxLat &amp;&amp; current.minLat &gt; limit.minLat ) activeCenterLat = current.center.lat();
        map.setCenter(
            new google.maps.LatLng(
                activeCenterLat,
                activeCenterLng
            )
        );
    });
</code></pre>


blocks|key|999270|text|当我使用拖动或拖动或其他任何方式时，地图会跳回到允许的范围内，而不是简单地限制溢出的移动。只需将事件更改为“center_changed”，以阻止它像那样跳来跳去。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|999271|修改后的jsfiddle：http://jsfiddle.net/Vjdde/1/|offset|length|999272|编辑:不确定为什么小提琴不会产生堆栈溢出，但它应该会，因为setCenter将再次调用center_changed。当心点|999273|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Vjdde/1/^0|0|D|S|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>When I'm using drag or dragend or whatever, the map jumps back into allowed bounds instead of simply restricting overflowing movement. Just change the event to 'center_changed' to stop it from jumping around like that.</p>

<p>Modified jsfiddle: <a href="http://jsfiddle.net/Vjdde/1/" rel="nofollow">http://jsfiddle.net/Vjdde/1/</a></p>

<p>Edit: Not sure why the fiddle doesn't produce a stack overflow but it should, since setCenter will call center_changed again.. Just watch out </p>


blocks|key|999316|text|我尝试了HenningJ的答案，地图不会停止平移，直到中心在边界的一角，这是不理想的。以下是我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|999317|google.maps.event.addListener(map,+'center_changed',+function()+{
++++var+mapBounds+=+map.getBounds();
++++if(allowedBounds.contains(mapBounds.getNorthEast())+&&+allowedBounds.contains(mapBounds.getSouthWest()))+{
++++++++lastCenter+=+map.getCenter();
++++++++return;
++++}

++++map.panTo(lastCenter);
},+this));|code-block|syntax|javascript|999318|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I tried the answer from HenningJ and the map wouldn't stop panning until the center was in a corner of the bounds which was not ideal. Here is my solution:</p>

<pre><code>google.maps.event.addListener(map, 'center_changed', function() {
    var mapBounds = map.getBounds();
    if(allowedBounds.contains(mapBounds.getNorthEast()) &amp;&amp; allowedBounds.contains(mapBounds.getSouthWest())) {
        lastCenter = map.getCenter();
        return;
    }

    map.panTo(lastCenter);
}, this));
</code></pre>


blocks|key|1213598|text|这里的解决方案给我留下了两个问题。首先，如果你按住箭头键，让它开始快速平移，当它击中边缘时，它不会一直走到边缘，因为由于平移加速度采取了很大的“步骤”，下一个“步骤”将已经超出界限，所以它不会采取最后的“步骤”。因此，一旦它停止，你可以释放箭头键，然后再按一次，它就会再平移一点。其次，这些解决方案没有正确地包含缩放更改后的平移。我设法解决了这两个问题，并发布了我的解决方案in+another+thread，但我认为我应该在这里链接它，因为这是第一次让我朝着正确的方向开始的线索。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1213599|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/17328707/1609411^0|57|H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>The solutions here left me with 2 issues.  First of all, if you held down the arrow key so that it started panning rapidly, when it hit the edge, it wouldn't go all the way to the edge because due to the panning acceleration taking large "steps", the next "step" would have gone outside the bounds, so it doesn't take that last "step".  So once it stopped, you could release the arrow key and then press it again, and it would pan just a little bit further.  Second, these solutions didn't properly contain the panning after a zoom change.  I managed to solve both, and posted my solution <a href="https://stackoverflow.com/a/17328707/1609411">in another thread</a>, but I thought I'd link it here, since this was the thread that first got me started in the right direction.</p>


blocks|key|1213628|text|最好的限制方法是，设置缩放级别和中心点，并禁用缩放、滚动等控件，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1213629|+var+latlng+=+new+google.maps.LatLng(18.283078,84.047556);
+++++var+myOptions+=+{
++++++++++zoom:+12,

++++++++++center:+latlng,
++++++++++zoomControl:+false,
++++++++++mapTypeId:+google.maps.MapTypeId.ROADMAP,
++++++++++scrollwheel:+false,
++++++++navigationControl:+false,
++++++++mapTypeControl:+false,
++++++++scaleControl:+false,
++++++++draggable:+false,
++++++++disableDoubleClickZoom:+true,
++++++++};
++++++++map+=+new+google.maps.Map(document.getElementById("map_canvas"),+++myOptions);|code-block|syntax|javascript|1213630|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The best method to restrict is, set the zoom level and center point and disable the controls like zoom, scroll etc like below.</p>

<pre><code> var latlng = new google.maps.LatLng(18.283078,84.047556);
     var myOptions = {
          zoom: 12,

          center: latlng,
          zoomControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        disableDoubleClickZoom: true,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),   myOptions);
</code></pre>


blocks|key|999455|text|这是HenningJ+--但是在iOS上的HenningJ使用的是lastValidCentre+--它不好用，因为它太旧了，所以我把它夹住了，这使得它在ios上更好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|999456|var+mapObject+=+plugin_map.gmap3('get');
var+allowedBounds+=+new+google.maps.LatLngBounds(
+++++new+google.maps.LatLng(41.3957556,+-88.4345472),+
+++++new+google.maps.LatLng(49.4010417,+-78.4286389)
);
google.maps.event.addListener(mapObject,+'center_changed',+function()+{
++++if+(allowedBounds.contains(mapObject.getCenter()))+{
++++++++//+still+within+valid+bounds,+so+save+the+last+valid+position
++++++++return;+
++++}

++++//+not+valid+anymore+=>+return+to+last+valid+position
+++++var+c+=+mapObject.getCenter(),
+++++++++x+=+c.lng(),
+++++++++y+=+c.lat(),
+++++++++maxX+=+allowedBounds.getNorthEast().lng(),
+++++++++maxY+=+allowedBounds.getNorthEast().lat(),
+++++++++minX+=+allowedBounds.getSouthWest().lng(),
+++++++++minY+=+allowedBounds.getSouthWest().lat();

+++++if+(x+<+minX)+x+=+minX;
+++++if+(x+>+maxX)+x+=+maxX;
+++++if+(y+<+minY)+y+=+minY;
+++++if+(y+>+maxY)+y+=+maxY;

+++++//mapObject.setCenter(new+google.maps.LatLng(y,+x));
+++++mapObject.panTo(new+google.maps.LatLng(y,+x));
});|code-block|syntax|javascript|999457|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is HenningJ - but HenningJ on ios uses lastValidCentre - which is not good, as its old, so I clamp, which makes it better on iOS.</p>

<pre><code>var mapObject = plugin_map.gmap3('get');
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(41.3957556, -88.4345472), 
     new google.maps.LatLng(49.4010417, -78.4286389)
);
google.maps.event.addListener(mapObject, 'center_changed', function() {
    if (allowedBounds.contains(mapObject.getCenter())) {
        // still within valid bounds, so save the last valid position
        return; 
    }

    // not valid anymore =&gt; return to last valid position
     var c = mapObject.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = allowedBounds.getNorthEast().lng(),
         maxY = allowedBounds.getNorthEast().lat(),
         minX = allowedBounds.getSouthWest().lng(),
         minY = allowedBounds.getSouthWest().lat();

     if (x &lt; minX) x = minX;
     if (x &gt; maxX) x = maxX;
     if (y &lt; minY) y = minY;
     if (y &gt; maxY) y = maxY;

     //mapObject.setCenter(new google.maps.LatLng(y, x));
     mapObject.panTo(new google.maps.LatLng(y, x));
});
</code></pre>


blocks|key|999510|text|这里有一个解决方案，它是Tom+Andersen的答案和目前接受的HenningJ答案的融合。这就是它的好处1)允许沿边缘更平滑地滚动(HenningJ的解决方案似乎对此笨拙)，以及2)在缩小区域时没有任何问题(同样，HenningJ的答案在放大和缩小边界附近时似乎会中断)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|999511|Tom的回答对我来说几乎是有效的，除了它将锁定区域定位在屏幕的中心，这对于我正在工作的应用程序来说是不可接受的。|999512|//+bounds+of+the+desired+area
var+allowedBounds+=+new+google.maps.LatLngBounds(
+++++new+google.maps.LatLng(70.33956792419954,+178.01171875),+
+++++new+google.maps.LatLng(83.86483689701898,+-88.033203125)
);
var+lastValidCenter+=+map.getCenter();

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

++++var+mapBounds+=+map.getBounds();
++++var+mapNe+=+mapBounds.getNorthEast();
++++var+mapSw+=+mapBounds.getSouthWest();
++++var+center+=+map.getCenter();

++++if(+allowedBounds.contains(mapNe)+&&+allowedBounds.contains(mapSw)+)+{
++++++++//the+user+is+scrolling+within+the+bounds.
++++++++lastValidCenter+=+center;
++++++++return;
++++}

++++//the+user+has+scrolled+beyond+the+edge.

++++var+mapWidth+=+mapNe.lng()+-+mapSw.lng();
++++var+mapHeight+=+mapNe.lat()+-+mapSw.lat();

++++var+x+=+center.lng();
++++var+y+=+center.lat();

++++var+maxX+=+allowedBounds.getNorthEast().lng();
++++var+maxY+=+allowedBounds.getNorthEast().lat();
++++var+minX+=+allowedBounds.getSouthWest().lng();
++++var+minY+=+allowedBounds.getSouthWest().lat();

++++//shift+the+min+and+max+dimensions+by+1/2+of+the+screen+size,+so+the+bounds+remain+at+the+edge+of+the+screen

++++maxX+-=+(mapWidth+/+2);
++++minX+%2B=+(mapWidth+/+2);

++++maxY+-=+(mapHeight+/+2);
++++minY+%2B=+(mapHeight+/+2);


++++if+(x+<+minX)+{
++++++++x+=+minX;
++++}
++++if+(x+>+maxX)+{
++++++++x+=+maxX;
++++}
++++if+(y+<+minY){
++++++++y+=+minY;
++++}
++++if+(y+>+maxY){
++++++++y+=+maxY;
++++}

++++map.panTo(new+google.maps.LatLng(y,+x));

});|code-block|syntax|javascript|999513|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here's a solution which is a merge together of Tom Andersen's answer and the currently accepted HenningJ answer.  The benefits of this is it 1) allows for smoother scrolling along edges (which HenningJ's solution seemed clunky with), and 2) doesn't have any issues when zooming in an out of an area (again HenningJ's answer seemed to break when zooming in and out near the boundaries).  </p>

<p>Tom's answer was close to working for me, except it positioned the locked off area into the center of the screen, which wasn't acceptable for the application I was working on.</p>

<pre><code>// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(70.33956792419954, 178.01171875), 
     new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();

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

    var mapBounds = map.getBounds();
    var mapNe = mapBounds.getNorthEast();
    var mapSw = mapBounds.getSouthWest();
    var center = map.getCenter();

    if( allowedBounds.contains(mapNe) &amp;&amp; allowedBounds.contains(mapSw) ) {
        //the user is scrolling within the bounds.
        lastValidCenter = center;
        return;
    }

    //the user has scrolled beyond the edge.

    var mapWidth = mapNe.lng() - mapSw.lng();
    var mapHeight = mapNe.lat() - mapSw.lat();

    var x = center.lng();
    var y = center.lat();

    var maxX = allowedBounds.getNorthEast().lng();
    var maxY = allowedBounds.getNorthEast().lat();
    var minX = allowedBounds.getSouthWest().lng();
    var minY = allowedBounds.getSouthWest().lat();

    //shift the min and max dimensions by 1/2 of the screen size, so the bounds remain at the edge of the screen

    maxX -= (mapWidth / 2);
    minX += (mapWidth / 2);

    maxY -= (mapHeight / 2);
    minY += (mapHeight / 2);


    if (x &lt; minX) {
        x = minX;
    }
    if (x &gt; maxX) {
        x = maxX;
    }
    if (y &lt; minY){
        y = minY;
    }
    if (y &gt; maxY){
        y = maxY;
    }

    map.panTo(new google.maps.LatLng(y, x));

});
</code></pre>


blocks|key|1213774|text|我会发布我的答案，以防任何人感兴趣，因为我不能用这里发布的任何其他解决方案来实现我所需要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1213775|我需要的是限制地图的垂直边界(纬度)，这样用户就不能平移地球的纬度边界(~+%2B/-85度)，但任何其他边界也可以。|1213776|此方法使用与其他地方描述的相同的center_changed事件，并在显示部分禁止边界的情况下简单地修复中心。|offset|length|style|CODE|1213777|此机制仅在地图的最小缩放设置为缩小时才有效，以便缩小时显示的面积永远不会超过允许的范围。|1213778|工作示例：http://jsbin.com/vizihe|1213779|function+initMap()+{
++//+sample+bounds,+can+be+anything+and+goes+hand+in+hand+with+minZoom
++var+northBoundary+=+40
++var+southBoundary+=+-40

++var+map+=+new+google.maps.Map(document.getElementById('map'),+{
++++center:+{lat:+0,+lng:+0},
++++zoom:+4,
++++//+it's+important+to+set+this+to+a+large+enough+value
++++//+so+that+zooming+out+does+not+show+an+area+larger+than+allowed
++++minZoom:+4+
++})

++map.addListener('center_changed',+function+()+{
++++var+bounds+=+map.getBounds();
++++var+ne+=+bounds.getNorthEast()
++++var+sw+=+bounds.getSouthWest()
++++var+center+=+map.getCenter()

++++if(ne.lat()+>+northBoundary)+{
++++++map.setCenter({lat:+center.lat()+-+(ne.lat()+-+northBoundary),+lng:+center.lng()})
++++}

++++if(sw.lat()+<+southBoundary)+{
++++++map.setCenter({lat:+center.lat()+-+(sw.lat()+-+southBoundary),+lng:+center.lng()})
++++}+++
++})
}|code-block|syntax|javascript|1213780|html,+body,+#map+{
++height:+100%25;
++margin:+0;
++padding:+0;
}|1213781|<!DOCTYPE+html>
<html>
++<head>
<meta+name="description"+content="limit+google+map+panning">
++++<title>Simple+Map</title>
++++<meta+name="viewport"+content="initial-scale=1.0">
++++<meta+charset="utf-8">
++</head>
++<body>
++++<div+id="map"></div>
++++<script+src="https://maps.googleapis.com/maps/api/js?callback=initMap"
++++async+defer></script>
++</body>
</html>|1213782|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/vizihe^0|0|0|G|E|0|0|5|N|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@$F|17|G|18|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@$F|1B|G|1C|1|1D]]|A|$]]|$1|N|3|O|5|P|7|1E|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|P|7|1F|8|@]|9|@]|A|$Q|R]]|$1|U|3|V|5|P|7|1G|8|@]|9|@]|A|$Q|R]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>I'll post my answer in case anyone's interested because I couldn't achieve what I needed with any of the other solutions posted here.</p>

<p>What I needed was to restrict the vertical bounds (latitude) of the map so that the user would not be able to pan beyond the latitude bounds of the earth (~ +/-85 degrees), but any other bounds would work too.</p>

<p>This approach uses the same <code>center_changed</code> event as described elsewhere and simply fixes the center in case parts of the prohibited bounds are shown.</p>

<p>This mechanism only works if the minimum zoom of the map is set so that zooming out can never show more area than that within the allowed bounds.</p>

<p>Working example: <a href="http://jsbin.com/vizihe" rel="nofollow">http://jsbin.com/vizihe</a></p>



<pre class="lang-js prettyprint-override"><code>function initMap() {
  // sample bounds, can be anything and goes hand in hand with minZoom
  var northBoundary = 40
  var southBoundary = -40

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 4,
    // it's important to set this to a large enough value
    // so that zooming out does not show an area larger than allowed
    minZoom: 4 
  })

  map.addListener('center_changed', function () {
    var bounds = map.getBounds();
    var ne = bounds.getNorthEast()
    var sw = bounds.getSouthWest()
    var center = map.getCenter()

    if(ne.lat() &gt; northBoundary) {
      map.setCenter({lat: center.lat() - (ne.lat() - northBoundary), lng: center.lng()})
    }

    if(sw.lat() &lt; southBoundary) {
      map.setCenter({lat: center.lat() - (sw.lat() - southBoundary), lng: center.lng()})
    }   
  })
}
</code></pre>

<pre class="lang-css prettyprint-override"><code>html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
&lt;meta name="description" content="limit google map panning"&gt;
    &lt;title&gt;Simple Map&lt;/title&gt;
    &lt;meta name="viewport" content="initial-scale=1.0"&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
    async defer&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>




blocks|key|999609|text|这里有一个简单的解决方案，可以在移动和桌面上使用。它将停止地图超出世界最大或最小纬度的平移，并允许设置最小缩放级别，这有助于防止由于缩小太远而变得可见的灰色区域(取决于您为地图设置的大小)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|999610|(我建议在使用HenningJ接受的答案中建议的center_changed事件时要谨慎。在我的例子中，这导致了Google+Chrome中堆栈溢出错误的事件数量。相反，可以使用“dragend”事件-尽管这将允许用户拖动到区域之外，然后立即“捕捉回”到地图的有效区域)。|999611|var+lastValidCenter;
var+minZoomLevel+=+2;

setOutOfBoundsListener();

function+setOutOfBoundsListener()+{
++++++++google.maps.event.addListener(map,+'dragend',+function+()+{
++++++++++++checkLatitude(map);
++++++++});
++++++++google.maps.event.addListener(map,+'idle',+function+()+{
++++++++++++checkLatitude(map);
++++++++});
++++++++google.maps.event.addListener(map,+'zoom_changed',+function+()+{
++++++++++++checkLatitude(map);
++++++++});
};

function+checkLatitude(map)+{
++++if+(this.minZoomLevel)+{
++++++++if+(map.getZoom()+<+minZoomLevel)+{
++++++++++++map.setZoom(parseInt(minZoomLevel));
++++++++}
++++}

++++var+bounds+=+map.getBounds();
++++var+sLat+=+map.getBounds().getSouthWest().lat();
++++var+nLat+=+map.getBounds().getNorthEast().lat();
++++if+(sLat+<+-85+%7C%7C+nLat+>+85)+{
++++++++//the+map+has+gone+beyone+the+world's+max+or+min+latitude+-+gray+areas+are+visible
++++++++//return+to+a+valid+position
++++++++if+(this.lastValidCenter)+{
++++++++++++map.setCenter(this.lastValidCenter);
++++++++}
++++}
++++else+{
++++++++this.lastValidCenter+=+map.getCenter();
++++}
}|code-block|syntax|javascript|999612|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here's a simple solution that will work across mobile and desktop. It will stop the map panning beyond the world's maximum or minimum latitude, and allows a minimum zoom level to be set, which can help to prevent grey areas becoming visible through zooming too far out (depending on the size you set for your map):</p>

<p>(I recommend caution in using the center_changed event as suggested in the accepted answer by HenningJ. In my case the number of events this creates caused stack overflow errors in Google Chrome. Instead, the 'dragend' event can be used - although this will allow the user to drag outside of the areas, and will then immediately 'snap back' to a valid area of the map).</p>

<pre><code>var lastValidCenter;
var minZoomLevel = 2;

setOutOfBoundsListener();

function setOutOfBoundsListener() {
        google.maps.event.addListener(map, 'dragend', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'idle', function () {
            checkLatitude(map);
        });
        google.maps.event.addListener(map, 'zoom_changed', function () {
            checkLatitude(map);
        });
};

function checkLatitude(map) {
    if (this.minZoomLevel) {
        if (map.getZoom() &lt; minZoomLevel) {
            map.setZoom(parseInt(minZoomLevel));
        }
    }

    var bounds = map.getBounds();
    var sLat = map.getBounds().getSouthWest().lat();
    var nLat = map.getBounds().getNorthEast().lat();
    if (sLat &lt; -85 || nLat &gt; 85) {
        //the map has gone beyone the world's max or min latitude - gray areas are visible
        //return to a valid position
        if (this.lastValidCenter) {
            map.setCenter(this.lastValidCenter);
        }
    }
    else {
        this.lastValidCenter = map.getCenter();
    }
}
</code></pre>


blocks|key|1213869|text|新版本的google地图API现在提供了一种限制边界的方法。只需在初始化地图时指定限制边界即可。例如，如果您希望将边界限制为仅Newzeland，则可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1213870|++<body>
++++<div+id="map"></div>
++++<script>
++++++var+map;
++++++var+NEW_ZEALAND_BOUNDS+=+{
++++++++north:+-34.36,
++++++++south:+-47.35,
++++++++west:+166.28,
++++++++east:+-175.81,
++++++};
++++++var+AUCKLAND+=+{lat:+-37.06,+lng:+174.58};

++++++function+initMap()+{
++++++++map+=+new+google.maps.Map(document.getElementById('map'),+{
++++++++++center:+AUCKLAND,
++++++++++restriction:+{
++++++++++++latLngBounds:+NEW_ZEALAND_BOUNDS,
++++++++++++strictBounds:+false,
++++++++++},
++++++++++zoom:+7,
++++++++});
++++++}
++++</script>
++++<script+async+defer
++++src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
++++</script>
++</body>|code-block|syntax|javascript|1213871|仅供参考:要限制整个世界的地图，您可以使用以下边界。这里的棘手之处在于使用strictBounds:true。这将确保用户不会缩小世界视图：|offset|length|style|CODE|1213872|map+=+new+google.maps.Map(document.getElementById('map'),+{
++++restriction:+{
++++++++latLngBounds:+{
++++++++++++north:+85,
++++++++++++south:+-85,
++++++++++++west:+-180,
++++++++++++east:+180
++++++++},
++++++++strictBounds:+true,
++++},
+++zoom:+7,
+++});|1213873|entityMap^0|0|0|11|H|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The new version of google map API now provides a way to restrict boundary. 
Just specify your restriction boundaries when you initialize the map.
For example if you want to restrict boundary to Newzeland only, this is how you do it:</p>

<pre><code>  &lt;body&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
    &lt;script&gt;
      var map;
      var NEW_ZEALAND_BOUNDS = {
        north: -34.36,
        south: -47.35,
        west: 166.28,
        east: -175.81,
      };
      var AUCKLAND = {lat: -37.06, lng: 174.58};

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: AUCKLAND,
          restriction: {
            latLngBounds: NEW_ZEALAND_BOUNDS,
            strictBounds: false,
          },
          zoom: 7,
        });
      }
    &lt;/script&gt;
    &lt;script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;callback=initMap"&gt;
    &lt;/script&gt;
  &lt;/body&gt;
</code></pre>

<p>FYI: To restrict the map of the whole world you can use the following bounds. The tricky part here is to use <code>strictBounds:true</code>. This will make sure that the user can not zoom out of the world view:</p>

<pre><code>map = new google.maps.Map(document.getElementById('map'), {
    restriction: {
        latLngBounds: {
            north: 85,
            south: -85,
            west: -180,
            east: 180
        },
        strictBounds: true,
    },
   zoom: 7,
   });
</code></pre>


<p>In V2 there was a way to limit panning/dragging so the map stays within certain bounds. How is that done in V3? </p>

<p>Let's say I want the users to only look at Europe. I've already limited the zoom, but if I allow dragging (which I have to in this case, for other reasons) then the user can pan beyond the area I want to show.</p>

<p>Please give working example or code snippet - I'm not an expert coder... </p>


How do I limit panning in Google maps API V3?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

在V2中，有一种方法可以限制平移/拖动，以便地图保持在特定的范围内。在V3中如何做到这一点呢？比方说，我希望用户只关注欧洲。我已经限制了缩放，但如果我允许拖动(在这种情况下，出于其他原因，我必须这样做)，那么用户可以平移到我想要显示的区域之外。请给出工作示例或代码片段-我不是一个专家程序员…

问如何在谷歌地图应用编程接口V3中限制平移？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在谷歌地图应用编程接口V3中限制平移？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在谷歌地图应用编程接口V3中限制平移？
EN