我尝试在 JQuery Mobile 页面上显示 Google map ，但每次加载页面时都很难使其正确显示。
我有两个主要页面正在运行:
- index.php
- map .php
当从index.php加载站点然后切换到导航栏中的map.php时， map 将首次加载。切换回index.php，然后再次切换回map.php， map 的中心会在左上角加载，并且直到触摸屏幕才会显示完整的 map (但是，这一切都不会发生在计算机的浏览器上)。但是，如果我首先加载 map.php，则 map 会在任何页面来回更改时保持在原位。
我的测试站点是http://beersandears.net/mbeta/
对我所缺少的有什么想法吗？我通过互联网研究得出了这一点，但我所做的一切都无法帮助解决此问题，包括:
- jQuery Mobile & Google Maps Glitch
- Google Map API v3 off center if reloaded (not the usual 'resize' thing)
- Why is the centering of my map off in my jQuery Mobile / Google Maps API3 application?
第三个似乎与我的问题非常相似，但使用“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>
最佳答案
已解决。我在 data-role="page" div 中有两个 ID，当我尝试引用第二个 ID 时，它正在读取第一个 ID 作为 ID。 pageshow 事件修复现在可以正常工作，如 third link above 中所示。 .
关于javascript - Google map 在 JQuery Mobile 中显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11838745/