Google Map V3不居中,仅显示地图的一部分

Question

我正在为iPhone开发基于jQTouch的应用程序,其中一部分使用Google Maps API(V3).我希望能够将地理位置坐标传递给地图,并使用标记将其置于中心位置.我现在得到的是适当缩放级别的地图,但所需的中心点出现在右上角.它也仅显示地图区域的大约三分之一(其余为灰色),并且当您平移或缩放时它的行为有些不规律.这是代码:

var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
});     

顺便说一句:它在其他平台/浏览器上的外观和行为也一样.

思考？

提前致谢,

标记

---

添加这里是一个链接,它将显示正在发生的事情: iPhone模拟器的屏幕截图

Answer 1

我猜你正在使用AJAX来显示地图,或者在某个时刻隐藏地图然后根据动作显示它？

在这种情况下,Google不知道地图容器的大小,它只会绘制地图的一部分,通常偏离中心.

要解决此问题,请调整地图大小,然后重新定位lat/lng.像这样的东西:

google.maps.event.trigger(map, 'resize');

// Recenter the map now that it's been redrawn               
var reCenter = new google.maps.LatLng(yourLat, yourLng);
map.setCenter(reCenter);

Answer 2

确保您已绝对设置画布的宽度/高度（即）

$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height());

当然，假设您已经启动并运行了 jqtouch 工具栏......