Question

您好我正在尝试在Google地图上加载图片。这是我得到的： enter image description here 红场 - 我所看到的。绿色广场 - 我想看到的。我希望在地图加载后缩放到绿色方块，但我无法设法做到这一点，任何帮助？

代码：

<!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）;”不起作用...... 有什么想法吗？

Answer 1

这可能是Google Maps v3的性质;边界范围超出-180到180的范围，将经度修改为179.9999。确保图像边界在Google Maps全局范围内可以解决问题。

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>

谷歌在加载后将v3缩放到GroundOverlay

1 个答案: