1

我处于需要将夏威夷和阿拉斯加加入 googlemap 的情况，但我添加了一个 jquery，以防止将地图拖到美国边界之外

有可能把夏威夷和阿拉斯加搬到北美附近吗？谢谢

这是防止地图拖到地图外的一个

 <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>
4

1 回答 1

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>
于 2013-10-10T17:16:22.317 回答