我的情况是我需要将夏威夷和阿拉斯加包括在googlemap中,但我添加了一个jquery,可以阻止地图被拖到美国Bounderies之外
有可能将夏威夷和阿拉斯加移动到北美附近吗?谢谢
这是阻止地图在地图外拖动的地方
<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 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));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
</script>
答案 0 :(得分:2)
您可以显示多个地图。图像显示主要的美国地图,以及两张阿拉斯加和夏威夷的小地图。
以下代码生成了它。
<script type="text/javascript">
function initialize()
{
var USA = new google.maps.LatLng(38.50, -90.50);
var ALASKA = new google.maps.LatLng(64.0000, -150.0000);
var HAWAII = new google.maps.LatLng(21.3114, -157.7964);
var myOptions =
{
zoom: 4,
center: USA,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myOptions2 =
{
zoom: 3,
center: ALASKA,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myOptions3 =
{
zoom: 6,
center: HAWAII ,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3);
google.maps.event.addListener(map, "zoom_changed", function()
{
zoomLevel = map.getZoom();
map2.setZoom(zoomLevel);
map3.setZoom(zoomLevel);
})
google.maps.event.addListener(map, "drag", function()
{
centre = map.getCenter();
map2.setCenter(centre);
map3.setCenter(centre);
})
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="top: 5px; left: 30px; width:800px; height:600px; float: left"></div>
<div id="map_canvas_2" style="top: 5px; left: 75px; width:300px; height:300px"></div>
<div id="map_canvas_3" style="top: 15px; left: 75px; width:300px; height:300px"></div>
</body>