Question

我正在寻找一种使用JavaScript在Google Maps API V3中围绕特定城市/城镇设置边界的方法

API中是否支持这种类型的东西？

基本上我不希望我的用户能够在城市之外进一步平移地图，包括乡村地区，而不仅仅是城市范围。

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

您需要获取城市边界的点数，然后才能创建折线。例如，一个想法可能与此类似：

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

Answer 3

使用map.fitBounds()或map.setCenter()将城市/国家/地区置于地图中心。
使用draggable: false选项禁用平移。

在谷歌地图中设置城市周围的边界

3 个答案: