Google地圖在JQuery Mobile中顯示不正確

我試圖在JQuery Mobile頁面上顯示Google Map，但每次頁面加載時都難以正確顯示Google Map。Google地圖在JQuery Mobile中顯示不正確

我有兩個工作的主要頁面：

的index.php
map.php

當加載從index.php文件，然後切換到該對map.php網站導航欄，地圖首次加載。切換回index.php再返回到map.php，地圖的中心加載到左上角，全屏地圖不會顯示，直到觸摸屏幕（然而，在計算機的瀏覽器上都不會出現這種情況）。但是，如果我先加載map.php，那麼地圖將保持原樣，來回更改頁面。

我的測試場地http://beersandears.net/mbeta/

對我缺少的是什麼任何想法？我已經得到了從互聯網上研究這一點，但沒有我曾試圖幫助解決這個問題，包括：

第三一個看起來與我的問題非常相似，但使用「pageshow」的解決方案不起作用。

這裏是map.php代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>" /> 
<title><?php wp_title('|', true, 'right'); ?></title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBtVQWtkD4MjJ3zbe9DXgPqSlC2XDn5K7c&sensor=true" type="text/javascript"></script> 
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
<style type="text/css"> 
img { 
    max-width:100%; 
    height:auto; 
} 
</style> 
</head> 
<body> 
<div id="wrapper" data-role="page" id="map_page"> 
    <div id="header" data-role="header" data-position="fixed" data-id="head"> 
     <h1>WDW Map</h1> 
    </div><!-- end header --> 
    <div id="map_canvas" data-role="content"> 
    </div><!-- end content --> 

<div id="footer" data-id="navbar" data-role="footer" data-position="fixed"> 
    <div id="navbar" data-role="navbar"> 
     <ul> 
      <li><a href="index.php">WDW Beer List</a></li> 
      <li><a href="map.php">WDW Map</a></li> 
      <li><a href="blog.php">Articles</a></li> 
     </ul> 
    </div><!-- end navbar --> 
</div><!-- end footer --> 
<script type="text/javascript"> 
     $(function(){ 
      initializeMap(28.385208623548024,-81.56713485717773); 
     }); 

     function initializeMap(lat,lng) { 
      var adjustedHeight = ($(window).height()); 
      $('#map_canvas').css({height:adjustedHeight}); 
      //$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height(); 
      setTimeout(function() { 

       var latlng = new google.maps.LatLng(lat, lng); 
       var myOptions = { 
         zoom: 12, 
        center: latlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
       //var crosshairLayer = new google.maps.KmlLayer('http://freezoo.alwaysdata.net/justcrosshair2.kml', 
       //{preserveViewport: true}); 

       //crosshairLayer.setMap(map); 

       google.maps.event.trigger(map, 'resize'); 
       map.setZoom(map.getZoom()); 
      }, 500); 
     } 
</script> 
</div><!-- end wrapper --> 
</body> 
</html>

來源

2012-08-07 scottoliver

解決。我在data-role="page" div中有兩個ID，它在讀取第一個ID作爲ID，而我試圖引用第二個ID。現在，頁面顯示事件修復工作如third link above中所示。

來源

2012-08-07 23:32:40 scottoliver

Google地圖在JQuery Mobile中顯示不正確

回答

相關問題