我目前正在尝试设置自定义 Google map 的边界，以便用户不能缩小得太远(世界地图开始水平平铺的点)，也不能垂直拖动太远以避免 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>最佳答案
来自 the documentation :
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(83.829945, 160.839844), // NE
new google.maps.LatLng(-72.711903, -165.058594) // SW
);
应该是:
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-72.711903, -165.058594), // SW
new google.maps.LatLng(83.829945, 160.839844) // NE
);
代码片段:
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>关于javascript - 谷歌地图边界不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36057188/