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

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

你能帮我吗？

谢谢！！

- Mark Design

---

相关链接：http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html - Phill Pafford

Answer 1

问题已解决，您需要在“pageshow”事件（jQuery Mobile的一个事件）中创建地图：

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

- Mark Design

---

很好的解决方案，我实际上根据我的需求进行了修改，它同样有效：$(document).live('pageshow',function(event, ui){ initialize_map_with_properties(); }); - DemitryT

Answer 2

解决方案是触发调整大小事件或不使用Ajax。 Phill已经向您展示了一个例子，演示了如何使用jQuery Mobile Google maps plugin进行操作（该插件使用Ajax并在页面加载时调用$('#map_canvas').gmap('refresh');）。该插件非常易于使用（特别是如果您已经了解Google地图语法）。

- johansalllarsson

---

我试图重写这些函数，并添加了这个“google.maps.event.trigger(map,'resize');”，但什么也没发生。然而，我注意到这个问题只在安卓设备/Chrome/Safari上出现，在iPhone/iPad上一切正常。我还注意到，地图加载后，如果我在浏览器或安卓设备上缩放页面（使用捏合缩放），地图就会自动修复。 - Mark Design

如果在“pageshow”事件上调整大小，则应该可以工作。但是在“pageshow”事件上创建地图也可以工作。 - johansalllarsson

是的，现在我在页面显示时创建地图，它也可以正常工作...谢谢!! - Mark Design

我在WIKI中添加了一些替代解决方案: http://code.google.com/p/jquery-ui-map/wiki/jquery_ui_map_v_3_tutorial#Help,_my_map_is_rendered_incorrectly!_(jQM) - johansalllarsson