通过移动左边缘来调整谷歌地图的大小答案

【问题标题】：resize a google map by moving left edge通过移动左边缘来调整谷歌地图的大小
【发布时间】：2011-06-22 22:07:34
【问题描述】：

我想在用户单击按钮时放大（或缩小）地图。地图将调整其左边缘，将其向左移动以变大，同时将右边缘保持在同一位置。当您单击小部件以放大地图（覆盖左侧边栏）时，这基本上就是谷歌地图本身所做的。

我没有问题调整/重新定位包含地图的 div，然后调用 google.maps.event.trigger(map, 'resize'); 唯一的问题是，正如预期的那样，地图的内容在屏幕上移动。我不想那样，我想把地图留在同一个位置，就像谷歌地图一样。换句话说，我希望右边缘的经纬度位置保持不变，因为地图的右边缘不会改变。

调用 map.getCenter() 然后 map.setCenter() 不会做我想要的，当然（尽管总比什么都不做要好）。 map.panBy() 可能会起作用，因为它以像素为单位（相对于纬度/经度）接受参数，但它会对其进行动画处理，这不是我想要的。

有什么想法吗？我是否必须将纬度/经度转换为像素，还是有更简单的方法可以做到这一点？

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

诀窍不是调整地图的大小，而是在您创建的地图上放置一个遮罩（地图以最大尺寸创建），然后移动遮罩（一个 div）。地图始终保持相同大小。您可能需要调整地图上其他控件的位置，例如缩放等（可以使用标准地图 API 完成），或者只是在右侧显示您的控件。

需要记住的一点是，该地图的边界框等于完整尺寸的地图，因此如果您向地图添加标记（并且希望用户看到它们），您需要跟踪地图的边界框地图的当前可见部分（latLng 到像素的转换） - 如果将标记添加到蒙版覆盖的部分，则可以滚动地图。

这是一个使用 jquery 动画完成的示例（但您可以通过简单地关闭侧边栏的可见性来实现）。 . 另一个需要注意的重要事情是用于包装器和侧边栏以及地图容器的 CSS.... 享受：

<!DOCTYPE html>
<html>
    <head>
        <title>Resize map</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var map;
            var overlay;
            var sidebar_expanded = true;
            function initialize() {
                var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
                var myOptions = {
                    zoom: 4,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            }

            $(document).ready( function() {
                $("#hide").click( function(e) {
                    if (sidebar_expanded){
                        offset = "-=140";
                        text = "Show me"
                    } else {
                        offset = "+=140";
                        text = "Hide me"
                    }
                    $("#sidebar").animate({

                        left: offset,

                    }, 1000, function() {

                            // Animation complete.
                        //you probably want to change content of the hide me div to show me, etc)
                        $("#hide").text(text);
                        sidebar_expanded = (sidebar_expanded ) ? false : true;
                    });
                })
            })
        </script>
        <style>
            body {
                text-align: center;
            }
            #map_canvas {
                position: absolute;
                top: 0;
                left: 0;
            }
            #wrapper {
                position: relative;
                width: 900px;
                height: 500px;
                overflow: hidden;
            }
            #sidebar {
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 500px;
                background: white;
                z-index: 2000000;
                border: 1px solid black;
            }

        </style>
    </head>
    <body onload="initialize()">
        <div id="wrapper">
            <div id="sidebar">
                <div id="hide" style="text-align:right;padding: 6px;">
                    Hide me
                </div>
            </div>
            <div id="map_canvas" style="width:900px;height: 500px;">
            </div>
        </div>
    </body>
</html>

【讨论】：

我曾考虑过这种方法，但担心诸如确保 google 徽标不会被遮盖之类的事情，这违反了服务条款。还有其他地方可能会搞砸，例如如果我允许谷歌在地图上绘制方向，它会自动设置窗口，如果窗口的一部分被隐藏，它会错误地设置。最后，我不确定如何进行 latLng 到像素的转换。

【解决方案2】：

我想这就是你想要的。

我使用了 Michal 示例并添加了一些东西。

始终显示地图 google 徽标和条款和使用 . 即使侧边栏发生变化，视图也会保持在最后一个位置

http://jsfiddle.net/guy_regev/K39dE/3/

【讨论】：

这不是 OP 想要的。当侧边栏展开时，地图图块、标记等会向右移动。只有地图控件和 Google 徽标应该移动。如何做到这一点？