Question

我在一个div中加载了一个Google地图，其宽度为页面的100％（通过API）。叠加层位于中心，地图应如下所示。问题是地图现在与左边对齐。

我可以使用与页面宽度相对应的LatLng移动中心，但这对于简单的任务来说似乎很多工作。我一直在查看API参考，但找不到解决方案。

Maps API（v3）中是否有任何方法可以将地图定位/对齐到中心？

修改

在此示例中调整浏览器窗口的大小时：

http://econym.org.uk/gmap/example_fullscreen1.htm

地图与窗口的topleft对齐。

我想要的是在调整大小时停留在窗口中心的地图中心。

因此，如果窗口宽度增加200px，地图将向右移动100px。

Answer 1

通过两个div，一个在另一个内，你甚至可以使用百分比来居中并附加一个事件处理程序，以便在每个resize事件上重新定位地图。

<强> HTML

<div id="outerdiv">
    <div id="map_go" />
</div>

<强> JS

$(window).on('resize', function() {
    var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
})

<强> CSS

#outerdiv {width: 90%; height: 90%; position:fixed; text-align:center}
#map_go {width: 70%; height: 100%; margin:0px auto; display:inline-block}

看到它在这里工作：http://jsfiddle.net/RASG/eXCFw/

使用firefox 15测试

Answer 2

我试过这个，它对我来说很好用

#map-canvas { height: 70%; width :50%; margin-left:auto; margin-right:auto;}

Answer 3

这应该有所帮助： http://econym.org.uk/gmap/basic19.htm

它描述了百分比大小的div和地图（需要知道地图的渲染大小）的问题。它来自Mike Williams的Google Maps API v2教程，但该概念也适用于v3。

Answer 4

我不明白为什么你需要2个DIV来实现这一目标。

一个DIV就足够了：

$(window).resize(function() {

    var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
});

请检查http://jsfiddle.net/RGUnd/2/

如何在具有可变宽度的div中居中/对齐Google地图

4 个答案: