谷歌地图API 3 - 限制平移/地图边界

我对Google地图完全陌生，只是创建我的第一张地图，以便将其合并到我的网站中。谷歌地图API 3 - 限制平移/地图边界

我想限制用户可以移动到英国的区域，并在这里查看了几个帖子，这些帖子都给出了非常相似的答案，但是我还没有能够获得代码工作我。然而，每当我尝试移动地图时，它都会以我的边界点为中心，而我无法将其移动到其他任何地方。

我可能犯了一个非常愚蠢的错误，在这种情况下，我很抱歉，但是我无法弄清楚什么是错的。有没有人有任何想法？

谢谢

我的代码如下（从谷歌的示例代码取，然后加入） - 这是有关边界的部分是接近底部，从设置的范围为英国：

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title>Google Maps</title> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"> 
    </script> 

    <? 
    //code to get long and lat from http://www.webmonkey.com/2010/02/get_started_with_google_geocoding_via_http 
    $apikey = MYKEY; 
    $geourl = "http://maps.google.com/maps/geo?q=LS255AA&output=csv&key=$apikey"; 

    // Create cUrl object to grab XML content using $geourl 
    $c = curl_init(); 
    curl_setopt($c, CURLOPT_URL, $geourl); 
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1); 
    $csvContent = trim(curl_exec($c)); 
    curl_close($c); 

    // Split pieces of data by the comma that separates them 
    list($httpcode, $elev, $lat, $long) = split(",", $csvContent); 
    ?> 

    <script type="text/javascript"> 
    var lat = "<?= $lat ?>"; 
    var long = "<?= $long ?>"; 
    </script> 

    <script type="text/javascript"> 
     function initialize() { 
      //sets the long and lat of map 
      var myLatlng = new google.maps.LatLng(lat, long); 

      //options for the map 
      var myOptions = { 
       center: myLatlng, 
       zoom: 9, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      //creates the map 
      var mymap = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 

      //sets min and max zoom values 
      var opt = { minZoom: 7, maxZoom: 11 }; 
       mymap.setOptions(opt); 

      //creates marker 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: mymap, 
       title:"Hello World!" 
      }); 

      //content of infowindow 
      var contentString = '<h2>I am an info window</h2>'+'<p>Hello my name is infowindow, I need more text to test how big I get</p>'; 

      //creates infowindow 
      var infowindow = new google.maps.InfoWindow({ 
        content: contentString, 
      }); 

      //infowindow options 
      infowindow.setOptions({maxWidth:200}); 

      //listens for click and opens infowindow 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(mymap,marker); 
      }); 
      // Bounds for UK 
      var strictBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(60.88770, -0.83496), 
        new google.maps.LatLng(49.90878, -7.69042) 
      ); 

      // Listen for the dragend event 
      google.maps.event.addListener(mymap, 'dragend', function() { 
       if (strictBounds.contains(mymap.getCenter())) return; 

       // We're out of bounds - Move the map back within the bounds 
       var c = mymap.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; 

       mymap.setCenter(new google.maps.LatLng(y, x)); 
      }); 
     } 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:50%; height:50%"></div> 

</body> 
</html>

来源

2012-02-01 Lucy Grainger

你有你的strictBounds混淆 - 改变它们的顺序，它应该工作正常。

一个LatLngBounds应该西南角第一，东北角第二： http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds

var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.90878, -7.69042), 
    new google.maps.LatLng(60.88770, -0.83496) 
);

来源

2012-02-01 20:52:51

我发现，这种方法效果很好，当你用鼠标移动地图，但是我仍然可以到这儿来的界限，如果我使用上面的变焦钮的导航工具，是有防止这种情况？ – 2012-02-02 10:59:32

好的！您可以将侦听器中的事件类型从'dragend'更改为'bounds_changed'。这会在视口中查找任何更改，所以它会包括缩小超出界限，拖动，使用导航控件等。我很高兴您能够使用它！ – 2012-02-02 17:25:47

@MikeJeffrey strictBounds是什么意思，你如何找到新加坡地图的经纬度？ – 2014-05-21 01:20:35

上面的代码帮我，但并没有解决我的问题。我需要根据地图上绘制的多边形禁用平移。我需要将平移限制到地图的特定窗口。所以用户不能远离最初的地图。

function disablePanning(enableBounds) { 
// listen to bound change event once to store the SW and NE corner 

google.maps.event.addListener(map, 'bounds_changed', function() { 
    // only set it once 
    if (enableBounds == null) { 
     enableBounds = map.getBounds(); 
    } 
}); 
var lastValidCenter=null; 
google.maps.event.clearListeners(map,'center_changed'); 
google.maps.event.addListener(map, 'center_changed', function() { 
    if(enableBounds!=null && lastValidCenter==null){ 
     lastValidCenter = enableBounds.getCenter(); 
    } 
    if (enableBounds != null && enableBounds != 'undefined') { 
     var ne = enableBounds.getNorthEast(); 
     var sw = enableBounds.getSouthWest(); 
     var allowedBounds = new google.maps.LatLngBounds(
       new google.maps.LatLng(sw.lat(), sw.lng()), 
       new google.maps.LatLng(ne.lat(), ne.lng())); 

     if (allowedBounds.contains(map.getCenter())) { 
      // still within valid bounds, so save the last valid position 
      lastValidCenter = enableBounds.getCenter(); 
      return; 
     } 

     // not valid anymore => return to last valid position 
     if(lastValidCenter!=null) 
      map.panTo(lastValidCenter); 
    } 
});

}

来源

2015-03-02 22:27:30 Ravi

谷歌地图API 3 - 限制平移/地图边界

回答

相关问题