Question

我可以在文档的第一页上显示谷歌地图。当我尝试将地图放在第二页上时，它就不完整了。我可以重新加载页面，然后可以看到完整的地图。我尝试了不同的时间来创建页面（文档准备，页面创建，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>

Answer 1

当您引用下一页时，必须声明链接不通过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 Docs： http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/pages/page-links.html

jquery-ui-map如何在第二页上显示完整的地图

1 个答案: