如何在地图上转换谷歌地图控件?

时间:2013-08-30 17:23:54

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

在我的应用程序中,我正在使用谷歌谷歌地图api v3。我想在我打开地址面板时移动地图控件,但是当我尝试重绘地图上的控件时,地图控件不会移位。我想转移所有地图控制像谷歌地图。出于演示目的,请转到https://maps.google.co.in/并搜索酒店或其他任何内容,然后隐藏旁边地址面板。在那里,您可以看到地图控件始终从边缘移动到面板边缘。我想像这样移动我的地图控件。请提供任何解决方案,以便像谷歌地图一样在地图上移动我的控件。

1 个答案:

答案 0 :(得分:0)

您可以尝试做的是在左侧为地图提供一点margin,当您关闭地址面板时,请删除margin并更新地图。

类似于:

<div id="map" style="width: 400px; height:400px; margin-left:100px"></div>
<a href="#">Expand</a>

<script>
    var map = new google.maps.Map($('#map').get(0));
    map.setCenter(new google.maps.latLng(40.736852, -74.002748));
    map.setZoom(12);

    var o = new google.maps.OverlayView();
    o.draw = function() {}
    o.setMap(map);

    $('a').on('click', function(){
        // Remove margin
        $('#map').css('marginLeft','0px');
        // Get current position in pixels on the map
        var current = o.getProjection().fromLatLngToContainerPixel(map.getCenter());
        // Set position to current - to margin-left.
        map.setCenter(o.getProjection().fromContainerPixelToLatLng({x:current.x - 100, y:current.y}));
    });
</script>