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

Question

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

use*_*007 0 google-maps google-maps-api-3

嗨,我想在谷歌地图上加载图像.这是我得到的: 在此输入图像描述红场 - 我所看到的.绿色广场 - 我想看到的.我想在地图加载后缩放到绿色方块,但我无法设法做到这一点,任何帮助？

码:

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

Run Code Online (Sandbox Code Playgroud)

我想缩放到覆盖层,地图看起来很像绿色方块,它看起来像"map.fitBounds(imageBounds);" 不工作...有什么想法吗？

Answer 1

小智 5

这可能是谷歌地图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>?

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，10 月前
查看次数：	1079 次
最近记录：	12 年，10 月前