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, 
});

BTW：它在其他平台/浏览器上的外观和行为也一样。

思想？

提前致谢，

标记

加这是一个链接，可以准确显示正在发生的事情： Screen shot of iPhone emulator

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

在Google Maps API 3 & jQTouch

上查看我的回答

基本上，你构建地图时你的#map_canvas div是不可见的，因为它所在的div已被jqtouch隐藏了。 api无法解决这个问题并且错误的大小。

如果gmaps v3允许在构造函数中设置显式大小（如v2那样），那么

会容易得多。

无论如何，延迟构建地图直到'pageAnimationEnd'。

Answer 3

确保您已完全设置画布的宽度/高度（即。）

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

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

Answer 4

在使用AJAX加载内容并显示和隐藏地图画布div后，加载带有路线的地图时遇到了同样的问题。

你必须触发调整大小事件，就像Brett DeWoody所说，但是我发现我的全局变量超出了范围，我不得不引用它们，即谷歌地图变量，INSIDE我的函数明确地在窗口对象上。以下是我在 directionsService 响应中的内容：

if (status == google.maps.DirectionsStatus.OK) {

    directionsDisplay.setDirections(response);

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

}

Answer 5

Brett DeWoody的解决方案有效，但是当我以模态显示地图时，我唯一的解决方案是添加这样的setTimeout：

setTimeout(function() {
    google.maps.event.trigger(map, 'resize');
    var reCenter = new google.maps.LatLng(lat, lng);
    map.setCenter(reCenter);
}, 500);

添加setTimeout后，地图会完美渲染和居中。

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

5 个答案: