Question

这很好用JQM 1.0a1：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Main Page</h1></div>
<div data-role="content"><p><a href="#map">Map</a></p></div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

    $('#map').live("pagecreate", function() {
        initialize(1.359,103.818);
    });


    function initialize(lat,lng) {
        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }


</script>

<div id="map" data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;"> 
    <div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>

但使用JQM 1.0.1（http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js）同样不会显示地图。我尝试使用$('#map').on和"pageinit"无效。

我错过了什么？

UPDATE ：与JQuery 1.6.3相同的行为

UPDATE2 ：通过给＃map-canvas div提供一个绝对大小（例如身高：200px;宽度：200px;），它可以正常工作。

Answer 1

如问题更新中所述，通过给height: 200px; width: 200px; div提供绝对大小（例如#map-canvas），问题就解决了。

将JQuery Mobile升级到1.0.1后，代码无效

1 个答案: