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

我可以在文档的第一页上显示谷歌地图。当我尝试将地图放在第二页上时，它是不完整的。我可以重新加载页面，然后可以看到完整的地图。我尝试了不同的时间来创建页面（文档就绪，页面创建，页面初始化，页面显示等），但没有成功。我已经将代码提炼到最低限度，并且发生了相同的现象，因此我包含我的示例代码。不幸的是，它仍然使用两个文件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>

当你引用你的下一页时，你必须声明链接不通过ajax加载。这可以通过多种方式完成：

1.）声明属性数据-ajax="false"

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

2.）声明属性 rel="外部"

<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

相关内容

最新更新

热门标签：