jquery-ui-map如何在第二頁上顯示完整的地圖

我可以在文檔的第一頁上顯示Google地圖。當我嘗試將地圖放置在第二頁上時，它不完整。我可以重新加載頁面，然後可以看到完整的地圖。我嘗試了不同的時間來創建頁面（文檔準備好，pagecreate，pageinit，pageshow等），但沒有成功。我已經將代碼精簡到最低限度，並且出現了相同的現象，因此我將包含示例代碼。不幸的是，它仍然使用jquery.mobile-1.2.0.css和jquery.ui.map.js這兩個文件。我認爲對於我不明白的ajax必須有一些非常基本的東西。jquery-ui-map如何在第二頁上顯示完整的地圖

<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>

來源

2012-12-18 Bob

當您引用下一頁時，您必須聲明鏈接不通過ajax加載。這是可以做到幾個方面：

1）聲明屬性數據的Ajax = 「假」

<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

來源

2013-02-07 22:29:28

jquery-ui-map如何在第二頁上顯示完整的地圖

回答

相關問題