logo标签列表

谷歌地图边界不起作用

javascriptgoogle-mapsgoogle-maps-api-3
3
我目前正在尝试设置自定义谷歌地图的边界，以使用户无法缩小到太远（到世界地图开始水平平铺的地方），并且无法在垂直方向上拖动，以避免this问题。
我已添加了代码以设置边界，但现在似乎无法拖动（取消注释边界代码以重新创建）。基本上，我只想让边界成为世界地图，以避免上面截图中的问题。我错过了任何明显的东西吗？ 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>
 #map_canvas {
  width: 100%;
  height: 650px;
 } // #map
</style>
</head>
<body>
<div id="map_canvas"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function CoordMapType(tileSize) {
 this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('DIV');
  
 div.style.width = this.tileSize.width + 'px';
 div.style.height = this.tileSize.height + 'px';
 div.style.backgroundImage = 'url(http://www.transparenttextures.com/patterns/dark-denim-3.png)';
  
 return div;
};

var map;
var mullem = new google.maps.LatLng(50.3873733,7.4952241);

function initialize() {
 var latlng = new google.maps.LatLng(50.3873733,7.4952241);
 var myOptions = {
   disableDefaultUI: true,
      zoom: 2
 };

 var map = new google.maps.Map(document.getElementById("map_canvas"),
   myOptions);
 var myLatLng = new google.maps.LatLng(50.3869012,  7.4950149);
 var marker = new google.maps.Marker({
  position: new google.maps.LatLng(40.6700, -73.9400),
       map: map,
       icon: 'images/map-marker.png',
       zIndex: 999999
     });

 map.setCenter(new google.maps.LatLng(51.508742,-0.120850));

 // MAP BOUNDS
 /*var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(83.829945, 160.839844), 
    new google.maps.LatLng(-72.711903, -165.058594)
 );
 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);
 });*/
 // MAP BOUNDS - END
 

  map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
 }

 google.maps.event.addDomListener(window, 'load', initialize);

</script>
</body>
</html>

罪魁祸首是map.panTo()。 - John
@ManuAntony 你能详细说明一下吗？ - wickywills
你的 map.panTo 被强制性地触发了太多次 - 这可能有关系，但我不确定。 - John
1个回答
3

来自文档:

LatLngBounds(sw?:LatLng|LatLngLiteral, ne?:LatLng|LatLngLiteral) 从其南西和东北角的点构造一个矩形。

您的边界反了:

var allowedBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(83.829945, 160.839844),  // NE
         new google.maps.LatLng(-72.711903, -165.058594) // SW
);

should be:

var allowedBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(-72.711903, -165.058594), // SW
         new google.maps.LatLng(83.829945, 160.839844)    // NE
);

proof of concept fiddle

code snippet:

function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('DIV');

  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.backgroundImage = 'url(http://www.transparenttextures.com/patterns/dark-denim-3.png)';

  return div;
};

var map;
var mullem = new google.maps.LatLng(50.3873733, 7.4952241);

function initialize() {
  var latlng = new google.maps.LatLng(50.3873733, 7.4952241);
  var myOptions = {
    disableDefaultUI: true,
    zoom: 2
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  var myLatLng = new google.maps.LatLng(50.3869012, 7.4950149);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(40.6700, -73.9400),
    map: map,
    icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
    zIndex: 999999
  });

  map.setCenter(new google.maps.LatLng(51.508742, -0.120850));

  // MAP BOUNDS
  //   LatLngBounds(sw?:LatLng|LatLngLiteral, ne?:LatLng|LatLngLiteral) Constructs a rectangle from the points at its south-west and north-east corners.
  var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-72.711903, -165.058594), // SW
    new google.maps.LatLng(73.829945, 160.839844) // NE
  );
  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);
  });
  // MAP BOUNDS - END


  map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
}
// #map
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接