堆栈内存溢出
  简体   繁体   English

如何限制Google Maps API V3中的平移？

[英]How do I limit panning in Google maps API V3?

 原文  2010-06-26 18:35:39  6   15    javascript/ google-maps/ google-maps-api-3

问题描述

In V2 there was a way to limit panning/dragging so the map stays within certain bounds. 在V2中有一种限制平移/拖动的方法，因此地图保持在特定范围内。 How is that done in V3? 怎么在V3中完成？

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. 我已经限制了缩放，但是如果我允许拖动（在这种情况下我必须出于其他原因），那么用户可以超出我想要显示的区域。

Please give working example or code snippet - I'm not an expert coder... 请给出工作示例或代码片段 - 我不是专家编码器......

15 个解决方案

解决方案1
 91  2011-10-11 19:30:45

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. 我想我参加派对有点晚了，但因为这正是我现在所需要的，而且我对此有所改进，我想我还是会发一个答案。

With both the answers of Daniel Vassallo and brendo , the user can still use the pan-control (if it's activated) to move away from the wanted area. 通过Daniel Vassallo和brendo的答案，用户仍然可以使用平移控制（如果它被激活）远离想要的区域。 The thing @Yauhen.F mentioned in a comment. @ Yauhen.F在评论中提到的东西。

So instead of using the dragend event, I use the center_changed event. 因此，我使用了center_changed事件，而不是使用dragend事件。 This is continuously fired during dragging and every time someone uses the pan control. 在拖动期间以及每次有人使用平移控件时都会持续触发。 

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

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. 通过在拖动过程中连续保存最后一个有效位置，一旦超出界限，移动就会停止，而不是在拖动结束后退回。 ...... ......

解决方案2
 21  2010-06-27 07:57:43

The trick is to listen to the dragend event, and if the map is dragged outside the allowed bounds, move it back inside. 诀窍是收听dragend事件，如果地图被拖到允许的边界之外，则将其移回内部。 If you define your allowed bounds as a LatLngBounds object, you can use the contains() method, since it returns true if the given lat/lng argument is within the bounds. 如果将允许的边界定义为LatLngBounds对象，则可以使用contains()方法，因为如果给定的lat / lng参数在边界内，则返回true。

It is also important to limit the zoom level, but it seems you are already doing this. 限制缩放级别也很重要，但似乎你已经这样做了。

Therefore, you may want to try the following example: 因此，您可能需要尝试以下示例： 

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

Screenshot from the above example. 以上示例的屏幕截图。 The user will not be able to drag further south or far east in this case: 在这种情况下，用户将无法再向南或远东拖动：

Google Maps JavaScript API v3示例：限制平移

解决方案3
 9  2013-06-05 12:02:31

My version, based on the one from @HenningJ, but with some modification of the lastValidCenter to allow smooth dragging along the edges of the bounds. 我的版本基于@HenningJ中的版本，但对lastValidCenter进行了一些修改，以允许沿边界的边缘平滑拖动 。 

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script>
        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(28.70, -127.50),
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);

                // bounds of the desired area
                var allowedBounds = new google.maps.LatLngBounds(
                  new google.maps.LatLng(28.70, -127.50),
                  new google.maps.LatLng(48.85, -55.90)
                );
                var boundLimits = {
                    maxLat : allowedBounds.getNorthEast().lat(),
                    maxLng : allowedBounds.getNorthEast().lng(),
                    minLat : allowedBounds.getSouthWest().lat(),
                    minLng : allowedBounds.getSouthWest().lng()
                };

                var lastValidCenter = map.getCenter();
                var newLat, newLng;
                google.maps.event.addListener(map, 'center_changed', function() {
                    center = map.getCenter();
                    if (allowedBounds.contains(center)) {
                        // still within valid bounds, so save the last valid position
                        lastValidCenter = map.getCenter();
                        return;
                    }
                    newLat = lastValidCenter.lat();
                    newLng = lastValidCenter.lng();
                    if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
                        newLng = center.lng();
                    }
                    if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
                        newLat = center.lat();
                    }
                    map.panTo(new google.maps.LatLng(newLat, newLng));
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"/>
    </body>
</html>

Fiddle here: http://jsfiddle.net/koenpunt/n7h6t/ 在这里小提琴： http ： //jsfiddle.net/koenpunt/n7h6t/

解决方案4
 3  2013-10-05 10:52:24

The best method to restrict is, set the zoom level and center point and disable the controls like zoom, scroll etc like below. 限制的最佳方法是，设置缩放级别和中心点，并禁用像缩放，滚动等控件，如下所示。 

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

解决方案5
 3  2010-11-22 00:07:37

Here is a nice extension to the above that will reset the Map's center to the last valid position by listening to the dragstart event. 这里是一个很好的扩展到上面 ，将通过听取dragstart事件地图的中心复位到最后一个有效位置。 

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

解决方案6
 2  2015-05-22 17:03:21

Here's a solution which is a merge together of Tom Andersen's answer and the currently accepted HenningJ answer. 这是一个解决方案，它将Tom Andersen的答案与目前公认的HenningJ答案合并在一起。 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). 这样做的好处是：1）允许沿着边缘更平滑地滚动（HenningJ的解决方案看起来很笨拙），以及2）当放大一个区域时没有任何问题（当放大时HenningJ的答案似乎再次破裂）并且靠近边界）。

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. 汤姆的答案接近为我工作，除了它将锁定的区域定位到屏幕的中心，这对我正在处理的应用程序来说是不可接受的。 

// 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 += (mapWidth / 2);

    maxY -= (mapHeight / 2);
    minY += (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));

});

解决方案7
 1  2013-04-09 05:42:40

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. 我尝试了HenningJ的答案，地图不会停止平移，直到中心位于不理想的边界一角。 Here is my solution: 这是我的解决方案： 

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

解决方案8
 1  2017-10-31 05:36:23

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): 它将停止地图平移超出世界的最大或最小纬度，并允许设置最小缩放级别，这有助于防止灰色区域通过缩放太远而变得可见（取决于您为地图设置的大小）：

(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). （我建议在使用HenningJ接受的答案中建议使用center_changed事件时要小心。在我的情况下，这会造成事件的数量导致Google Chrome中出现堆栈溢出错误。相反，可以使用'dragend'事件 - 尽管这样可以用户拖动区域之外，然后立即“快照”回到地图的有效区域。 

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

解决方案9
 1  2012-01-13 09:02:39

There is another thread 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. 我必须解决的问题是，不是手动设置边界和检查中心包含，我想在页面加载上设置边界，然后允许在放大时拖动到边缘。

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. 如果放大，我想平移到初始边界的边缘，而不仅仅是检查是否包含CENTER，因为这会将允许的平移延长视口的一半。

Unfortunately, although this gets the job done and works fine when paning slowly, it's a bit jerky if you pan quickly. 不幸的是，虽然这可以完成工作并且在慢慢地翘起时工作正常但如果你快速平移会有点不稳定。

If you have suggestions on how this can be avoided, I'd be grateful. 如果你有关于如何避免这种情况的建议，我将不胜感激。 

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

解决方案10
 0  2012-07-09 14:47:13

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. 只需将事件更改为“center_changed”即可阻止其跳转。

Modified jsfiddle: http://jsfiddle.net/Vjdde/1/ 修改过的jsfiddle： http ： //jsfiddle.net/Vjdde/1/

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 编辑：不知道为什么小提琴不会产生堆栈溢出，但它应该，因为setCenter将再次调用center_changed ..请注意

解决方案11
 0  2013-06-26 19:28:51

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 in another thread , but I thought I'd link it here, since this was the thread that first got me started in the right direction. 我设法解决了这两个问题，并在另一个线程中发布了我的解决方案，但我想我会把它链接到这里，因为这是第一个让我开始正确方向的线程。

解决方案12
 0  2015-05-19 14:50:03

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. 这是HenningJ - 但ios上的HenningJ使用了lastValidCentre - 这不是很好，因为它很旧，所以我钳制，这使它在iOS上更好。 

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

解决方案13
 0  2016-06-04 17:51:39

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. 如果有人感兴趣，我会发布我的答案，因为我无法通过此处发布的任何其他解决方案实现我所需要的。

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. 我需要的是限制地图的垂直边界（纬度），以便用户无法平移超出地球的纬度界限（〜+/- 85度），但任何其他界限也会起作用。

This approach uses the same center_changed event as described elsewhere and simply fixes the center in case parts of the prohibited bounds are shown. 此方法使用与其他地方描述的相同的center_changed事件，并且仅在显示禁止边界的部分时简单地修复中心。

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. 此机制仅在设置了地图的最小缩放时才有效，因此缩小时不能显示比允许范围内的区域更多的区域。

Working example: http://jsbin.com/vizihe 工作示例： http ： //jsbin.com/vizihe 

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

html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

解决方案14
 0  2016-06-10 18:28:42

I know I am little late to the party, but it seems that as of middle 2016 , there is no official way to restrict viewable area. 我知道我对派对来说已经迟到了，但似乎截至2016年中期 ，没有官方的方法来限制可见区域。

There are some solutions to restrict the bounds (some of them in this question) but for me they have a flaw though, because they don't restrict the bounds exactly to fit the map view, they only restrict the map center be contained within the specified bounds. 有一些限制边界的解决方案（在这个问题中有一些），但对我来说它们有一个缺陷，因为它们并没有完全限制边界以适应地图视图，它们只限制地图中心包含在指定的边界。 If you want to restrict the bounds to overlaying image like me, this can result in a behavior like illustrated below, where the underlaying map is visible under our image overlay: 如果你想限制像我一样覆盖图像的边界，这可能会导致如下图所示的行为，其中底层地图在我们的图像叠加下可见：

在此输入图像描述

To tackle this issue, I have created a library , which successfully restrict the bounds so you cannot pan out of the overlay. 为了解决这个问题，我创建了一个库 ，它成功地限制了边界，因此您无法平移覆盖。

However, as other existing solutions, it has a "vibrating" issue. 然而，作为其他现有解决方案，它具有“振动”问题。 When the user pans the map aggressively enough, after they release the left mouse button, the map still continues panning by itself, gradually slowing. 当用户足够积极地平移地图时，在他们释放鼠标左键后，地图仍然会自动继续平移，逐渐减慢。 I always return the map back to the bounds, but that results in kind of vibrating, which settles after a moment. 我总是将地图返回到界限，但这会产生一种振动，一会儿就会结束。 This panning effect cannot be stopped with any means provided by the Js API at the moment. 此刻平移效果无法通过Js API提供的任何方式停止。 It seems that until google adds support for something like map.stopPanningAnimation() we won't be able to create a smooth experience. 似乎在Google添加对map.stopPanningAnimation（）等内容的支持之前，我们将无法创建流畅的体验。

Example using the mentioned library, the smoothest strict bounds experience I was able to get: 使用上述库的示例，我能够得到的最顺畅的严格边界体验： 

 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){ var bounds = new google.maps.LatLngBounds( new google.maps.LatLng(62.281819, -150.287132), new google.maps.LatLng(62.400471, -150.005608)); var image_src = 'https://developers.google.com/maps/documentation/' + 'javascript/examples/full/images/talkeetna.png'; 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()"> <div id="map" style="height:500px; width:1000px;"></div> <script type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script> </body>

解决方案15
 0  2019-09-10 22:47:12

The new version of google map API now provides a way to restrict boundary. 谷歌地图API的新版本现在提供了限制边界的方法。 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: 例如，如果您只想将边界限制为Newzeland，则执行以下操作： 

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

FYI: To restrict the map of the whole world you can use the following bounds. 仅供参考：要限制整个世界的地图，您可以使用以下范围。 The tricky part here is to use strictBounds:true . 这里棘手的部分是使用strictBounds:true 。 This will make sure that the user can not zoom out of the world view: 这将确保用户无法缩小世界视图： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 google maps api v3 中创建网格 - How do I create a grid in google maps api v3 如何使用google maps api v3突出显示某个国家/地区？ - How do I highlight a country with the google maps api v3? 在Google Maps API v3中切换平移和标记移动锁定 - Toggle panning and marker movement lock in Google Maps API v3 Google Maps Javascript API V3-连续平移 - Google Maps Javascript API V3 - Continuous Panning 在Google Maps API V3中，如何在不使用限制平移解决方案的情况下防止标记在x轴上重复？ - In google Maps API V3, How can I Prevent markers from repeating on x axis without using the limiting panning solution? Google Maps API v3 中的 OVER_QUERY_LIMIT：如何在 Javascript 中暂停/延迟以减慢速度？ - OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down? Google Maps API V3：无论缩放级别如何，如何为平移设置相同的边界 - Google maps API V3: how to set same boundaries for panning, whatever the zoom level 如何在北极或南极下方的灰色区域中阻止Google Maps API V3平移？ - How to block google maps api v3 panning in the gray zone over north pole or under south pole? 如何在两点之间的Google Maps API V3和Google Places API中显示位置？ - How do i show places, in google maps api v3 and google places api, between two points? 如何在Google Maps API v3中创建可点击图标？ - How do create clickable icons in google maps api v3?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM