移动设备上显示错误的地图（使用JQuery移动设备）

Question

我正在使用jQuery mobile，我必须显示一些地图。 我每次点击特定链接时都使用一个创建地图的功能，但是在生成第一个地图后，其他地图显示错误。

这是一个例子， 第一张地图：

其他地图：

我使用这样的函数：

function buildMap(div){

    var coord = new google.maps.LatLng(lat, lng);

    var options = {
        zoom: 13,
        scrollwheel: false,
        scaleControl: true,
        mapTypeControl: false,
        center: coord,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(div, options);

    return map;
}

你能帮助我吗？

谢谢！

Answer 1

问题解决了，你需要在“pageshow”事件（jQuery mobile事件）上创建地图：

$('#map_page').live('pageshow',function(event, ui){
    buildResultMap('#map_canvas');
});

Answer 2

解决方案是触发resize事件或不使用Ajax。 Phill已经向您介绍了如何使用使用Ajax的jQuery Mobile Google maps plugin （并调用$（'#map_canvas'）。gmap（'refresh'）;在页面加载上完成它。该插件非常易于使用（特别是如果您已经了解Google地图语法）。