0

我可以在文档的第一页上显示谷歌地图。当我尝试将地图放在第二页时，它是不完整的。我可以重新加载页面，然后可以看到完整的地图。我尝试了不同的时间来创建页面（文档就绪、pagecreate、pageinit、pageshow 等），但均未成功。我已经将代码精简到最低限度，并且发生了同样的现象，所以我将我的示例代码包括在内。不幸的是，它仍然使用 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 Mobile 文档：http: //jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/pages/page-links.html

于 2013-02-07T22:29:28.337 回答