我正在尝试将Google Maps API 3与jQuery Mobile一起使用,并且无法让我的外部页面加载地图.我检查了Firebug,看来地图正在创建但隐藏在页面上.我可以让主页成功加载地图,我可以使用链接上的
这是我的代码：
的index.html
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://img.558idc.com/uploadfile/allimg/210615/23013J3X-0.jpg"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://img.558idc.com/uploadfile/allimg/210615/23013K238-2.jpg"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<ul data-role='listview' id='menu'>
<li><a href="pages/map.html">external map page (does not work)</a></li>
<li><a href="pages/map.html" rel="external">map page with rel=external (works)</a></li>
</ul>
</div>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://img.558idc.com/uploadfile/allimg/210615/23013J3X-0.jpg"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://img.558idc.com/uploadfile/allimg/210615/23013K238-2.jpg"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<h2>Map</h2>
<div id="map_canvas"></div>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(40.716948, -74.003563);
//console.log(latlng);
var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}
$(function () {
initialize();
});
</script>
</div>
</div>
</body>
</html>
如何在不使用rel =“external”的情况下让Google地图显示在外部网页上？
我找到了解决方案.我需要在“pagecreate”jQuery Mobile事件中初始化Google地图,而不是在$(document).ready上.我也遇到了问题,因为每次页面显示时都没有正确呈现完整的地图所以我通过调用google.maps.event.trigger(map,’resize’)来解决这个问题,以刷新“pageshow”jQuery Mobile事件上的地图.这是我的代码：
的index.html
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://img.558idc.com/uploadfile/allimg/210615/23013J3X-0.jpg"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://img.558idc.com/uploadfile/allimg/210615/23013K238-2.jpg"></script>
<style type="text/css">
.gmap { height: 330px; width: 100%; margin: 0px; padding: 0px }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<ul data-role='listview' id='menu'>
<li><a href="pages/map1.html">external map page 1</a></li>
<li><a href="pages/map2.html">external map page 2</a></li>
</ul>
</div>
</div>
</body>
</html>
map1.html
<div data-role="page" class="page-map1">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<h2>Map</h2>
<div id="map1" class="gmap"></div>
<script type="text/javascript">
var map1, latlng1, options1;
function initialize() {
latlng1 = new google.maps.LatLng(40.716948, -74.003563);
options1 = { zoom: 14, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP };
map1 = new google.maps.Map(document.getElementById("map1"), options1);
}
$('.page-map1').live("pagecreate", function() {
initialize();
});
$('.page-map1').live('pageshow',function(){
//console.log("test");
google.maps.event.trigger(map1, 'resize');
map1.setOptions(options1);
});
</script>
</div>
</div>
map2.html
<div data-role="page" class="page-map2">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<h2>Map</h2>
<div id="map2" class="gmap"></div>
<script type="text/javascript">
var map2, latlng2, options2;
function initialize() {
latlng2 = new google.maps.LatLng(40.716948, -74.003563);
options2 = { zoom: 14, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP };
map2 = new google.maps.Map(document.getElementById("map2"), options2);
}
$('.page-map2').live("pagecreate", function() {
initialize();
});
$('.page-map2').live('pageshow',function(){
google.maps.event.trigger(map2, 'resize');
map2.setOptions(options2);
});
</script>
</div>
</div>