Question

作为德国人，我发现很难解释，我希望你能解决我的问题：

当您在Google Maps打开时调整浏览器窗口大小时，您将看到地图如何在右侧切割。换句话说：当你调整整个窗口的大小时，左角的坐标保持不变。当我只是动态调整地图画布（在我的代码中）时，会发生同样的效果。

现在：在Google地图中，您可以显示或隐藏左侧的面板。当您单击“显示”（或“隐藏”）时，可以看到不同的内容，即使地图调整大小，右角的坐标也保持不变。

正如我所描述的那样，“普通”div调整大小不会这样做。

那么：如何动态改变地图的宽度，右边角的坐标保持不变？

我真的希望你明白：）

非常感谢，

蒂莫

Answer 1

您想要实现的目标可以尝试侦听地图对象的bounds_changed事件，并计算包含NorthEast角落的新边界，然后设置新边界。困难在于计算涉及复杂数学的SouthWest角落。

考虑以下示例：

<!DOCTYPE html>    
<html>
    <head>    
        <title>Kml Layer</title>
       <style type="text/css">
            html,  body{height: 100%;margin: 0;padding: 0;}
            #map-container{ height: 100%; width: 100%; min-width:500px; min-height:300px; }
        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    

    </head>
    <body>
        <div>
            <span id="coordinates">
            </span>
        </div>
        <div id="map-container"></div>
        <script type="text/javascript"  language="javascript">
            var map;
            $(document).ready(function () {

                var $mapContainer = $("#map-container"),
                $coordinates = $("#coordinates");

                var mapOptions = {
                    zoom: 12,
                    center: new google.maps.LatLng(3.4199865, -76.519775)
                }
                map = new google.maps.Map($mapContainer[0], mapOptions);

                var oldBounds, setBounds = function() {
                    google.maps.event.removeListener(listener);
                    console.log("bounds_changed");
                    var newBounds = map.getBounds();

                    if(oldBounds){                      
                        var northEast = oldBounds.getNorthEast(),
                           // the calcul of the south west corner is somewhat dificult I'm taking arbitrary the southwest corner of the 'newBounds' object
                           // only to get the code to work, but this point have to be recalculated taking in account the div you're resizing.
                            southWest = newBounds.getSouthWest(),
                            newMapBounds = new google.maps.LatLngBounds(southWest, northEast);

                        map.fitBounds(newMapBounds);                        
                    }

                    oldBounds = newBounds;
                    setTimeout(function(){
                        listener = google.maps.event.addListener(map, "bounds_changed", setBounds);
                    },0);                     
                },
                listener = google.maps.event.addListener(map, "bounds_changed", setBounds);
            });

        </script>
    </body>
</html>

google maps api - 左侧调整宽度

1 个答案: