8

我在一个 100% 的页面宽度的 div 中加载了谷歌地图（通过 API）。叠加层位于中心，地图应像这样定位。问题是地图现在向左对齐。

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

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

编辑：

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

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

地图与窗口的左上角对齐。

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

因此，如果窗口宽 200 像素，地图将向右移动 100 像素。

4

4 回答 4

8

通过有两个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/

用火狐15测试

于 2012-10-23T18:33:31.837 回答
6

我试过了，对我来说效果很好

#map-canvas { height: 70%; width :50%; margin-left:auto; margin-right:auto;}
于 2014-05-12T20:41:20.143 回答
1

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

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

于 2012-10-23T17:35:15.140 回答
0

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

一个 DIV 就足够了：

$(window).resize(function() {

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

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

于 2012-10-24T10:23:13.017 回答