После обновления JQuery Mobile до версии 1.0.1 код не работает - PullRequest
Новая
       11

После обновления JQuery Mobile до версии 1.0.1 код не работает

0 голосов
/ 04 февраля 2012

Это прекрасно работает с 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" безрезультатно.

Чего мне не хватает?

ОБНОВЛЕНИЕ : такое же поведение с JQuery 1.6.3

UPDATE2 : предоставляя абсолютный размер (например, высоту: 200px; ширина: 200px;) элементу div # map-canvas, он работает нормально.

1 Ответ

0 голосов
/ 24 сентября 2013

Как указано в обновлении вопроса, путем задания абсолютного размера (например, height: 200px; width: 200px;) для #map-canvas div, проблема решается.

...