Question

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

我可以调整包含地图的div的大小/重新定位，然后调用 google.maps.event.trigger（map，'resize'）; 唯一的问题是，正如预期的那样，地图的内容会在屏幕上移动。我不想那样，我想让地图保持在相同的位置，就像谷歌地图一样。换句话说，我希望右边缘的lat-long位置保持不变，因为地图的右边缘不会改变。

调用map.getCenter（）然后map.setCenter（）当然不能做我想做的事（虽然它比无所事事更好）。 map.panBy（）可能有用，因为它以像素为单位（vs lat / long），但它会为它设置动画，而这不是我想要的。

有什么想法吗？我是否必须将lat / long转换为像素，或者有更简单的方法吗？

Answer 1

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

要注意的是，该地图的边界框将等于全尺寸地图，因此如果您向地图添加标记（并且您希望用户看到它们），则需要跟踪边界框的当前可见的地图部分（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>

Answer 2

我认为这就是你想要的。

我使用Michal示例并添加了内容。

映射谷歌徽标和条款＆amp;使用总是显示。即使侧边栏发生变化，视图仍保留在最后位置

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

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

2 个答案: