0

嗨，我正在尝试在谷歌地图上加载图像。这是我得到的： 在此处输入图像描述 红色方块 - 我看到的。绿色广场 - 我想看到的。我想在地图加载后缩放到绿色方块，但我无法做到这一点，有什么帮助吗？

代码：

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
   <div id="map" style="width: 800px; height: 400px;"></div>
   <script type="text/javascript">
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });
   var imageBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-90,-180),
     new google.maps.LatLng(90,180));
   var oldmap = new google.maps.GroundOverlay("http://www.dxatlas.com/HamCap/3Y0X/20UT-21MHz.gif", imageBounds);
   oldmap.setMap(map);
   oldmap.setOptions({opacity: 0.5});
   map.fitBounds(imageBounds);
   </script>
</body> 
</html>

我想缩放到覆盖层，该地图看起来像绿色方形显示，它看起来像“map.fitBounds(imageBounds);” 不起作用...有什么想法吗？

4

1 回答 1

5

这可能是 Google Maps v3 的本质；边界范围超出 -180 到 180 的范围，将经度修改为 179.9999。确保图像边界在谷歌地图的全球范围内可能会解决问题。

http://jsfiddle.net/wptc/cPcMC/

一些代码演示了这个问题：

<html>
<head>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
   <div id="map" style="width: 95%; height: 400px;"></div>
   <script type="text/javascript">
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(30, -97),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });




        var viewportBox;

        google.maps.event.addListener(map, 'idle', function(event) {

            var imageBounds = new google.maps.LatLngBounds(
             new google.maps.LatLng(-90,-179.999),
             new google.maps.LatLng(90,180));
             var oldmap = new google.maps.GroundOverlay("http://www.dxatlas.com/HamCap/3Y0X/20UT-21MHz.gif", imageBounds);
           oldmap.setMap(map);
           oldmap.setOptions({opacity: 0.5});

           map.fitBounds(imageBounds);


            var bounds = map.getBounds();

            var ne = bounds.getNorthEast();
            var sw = bounds.getSouthWest();

            var viewportPoints = [
                ne, new google.maps.LatLng(ne.lat(), sw.lng()),
                sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
            ];

            if (viewportBox) {
                viewportBox.setPath(viewportPoints);
            } else {
                viewportBox = new google.maps.Polygon({
                    path: viewportPoints,
                    strokeColor: '#FF0000',
                    strokeOpacity: 1.0,
                    strokeWeight: 1 
                });
                viewportBox.setMap(map);
            };

            var info = document.getElementById('info');
            info.innerHTML = 'NorthEast: ' + ne.lat() + '   ' + ne.lng() + 
                '<br />' + 'SouthWest: ' + sw.lat() + '   ' + sw.lng();
        });       



   </script>
</body>
    <div id='info'></div>
</html>​
于 2012-12-13T13:31:44.323 回答