0

ドキュメントの最初のページにGoogleマップを表示できます。2ページ目に地図を配置しようとすると、不完全です。ページをリロードすると、完全なマップが表示されます。ページを作成するためにさまざまな時間を試しましたが（ドキュメント準備完了、pagecreate、pageinit、pageshowなど）、成功しませんでした。コードを最小限に抑えましたが、同じ現象が発生するため、サンプルコードを含めています。残念ながら、それでも2つのファイルjquery.mobile-1.2.0.cssとjquery.ui.map.jsを使用します。私が理解していないajaxについての非常に基本的な何かがあるに違いないと思います。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>TEST</title>

<link href='http://fonts.googleapis.com/css?family=Cantarell:700italic'
rel='stylesheet' type='text/css'>
<link href="css/jquery.mobile-1.2.0.css" rel="stylesheet"
type="text/css" />

<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript"
    src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
<script>
var newyork = new google.maps.LatLng(40.745176,-74.006859);
var boston = new google.maps.LatLng(42.369706,-71.06036);
var washington = new google.maps.LatLng(38.908133,-77.036922);
var mobileDemo = {
    'center': '40.745176,-74.006859',
    'zoom': 7
};

function initializeMap() {
    $('#map_canvas').gmap({ 
        'center': mobileDemo.center, 
        'zoom': mobileDemo.zoom, 
        'disableDefaultUI':false 
    });
}

  function populateMap() {
    $('#map_canvas').gmap('addMarker', {
       'position': newyork,
        'bounds': true
    } ).click(function() {
        $('#map_canvas').gmap('openInfoWindow', {
            'content': 'New York'
        }, this);
    });
$('#map_canvas').gmap('addMarker', {
    'position': boston,
    'bounds': 'true'
} ).click(function() {
    $('#map_canvas').gmap('openInfoWindow', {
        'content': 'Boston'
    }, this);
    });
    $('#map_canvas').gmap('addMarker', {
        'position': washington,
        'bounds': 'true'
    } ).click(function() {
        $('#map_canvas').gmap('openInfoWindow', {
            'content': 'Washington'
        }, this);
    });
}


$('#selectPage').live("pageinit", function () {
    'use strict';
    initializeMap();
    populateMap();
}); 

</script>

</head>

<body>
    <div data-role="page" id="homePage">
        <div data-role="content">
            <div><a href="#selectPage">View the map</a></div>
        </div>
    </div>

    <div data-role="page" id="selectPage">
        <div data-role="content">
        <div>
            <div id="map_canvas" style= "width:100%; height: 350px">   </div>
        </div>
        </br>
        <div><a href="#homePage">Back to the home page</a></div>
    </div>
</div>

<body>
</html>
4

1 に答える 1

0

次のページを参照するときは、リンクが ajax 経由で読み込まれないように宣言する必要があります。これにはいくつかの方法があります。

1.) 属性 data-ajax="false" の宣言

<a href="file:///pathToYourHtmlPage/yourNextPage.html" data-ajax="false"></a>

2.) 属性 rel="external" の宣言

<a href="file:///pathToYourHtmlPage/yourNextPage.html" rel = "external"></a>

経由: jQuery モバイル ドキュメント: http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/pages/page-links.html

于 2013-02-07T22:29:28.337 に答える