jQuery Mobile - 如何在外部链接页面上实现 Google 地图
我尝试将 Google Maps API 3 与 jQuery Mobile 结合使用，但无法让我的外部页面加载地图。我检查了 Firebug，似乎正在创建地图，但隐藏在页面上。我可以使用链接上的 rel="external" 属性获取主页以成功加载地图，也可以获取外部页面以成功加载地图。但对于不使用 rel="external" 的外部页面，地图不会显示。
这是我的代码：
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://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></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://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></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 地图显示在外部页面上？
I am attempting to use Google Maps API 3 with jQuery Mobile and cannot get my external pages to load a map. I checked in Firebug and it appears that the map is being created but is hidden on the page. I can get the home page to load a map successfully and I can get external pages to load the map successfully using rel="external" attribute on the link. But for external pages not using rel="external" the map doesn't show up.
Here is my code:
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://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></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://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></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>
How can I get a Google Map to show up on an external page without using rel="external"?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我找到了解决方案。我需要在“pagecreate”jQuery Mobile 事件中而不是在 $(document).ready 上初始化 Google 地图。我还遇到了每次页面显示时完整地图都无法正确渲染的问题，因此我通过调用 google.maps.event.trigger(map, 'resize') 来刷新“pageshow”jQuery Mobile 事件上的地图来解决该问题。
这是我的代码：
index.html
map1.html
map2.html
I found the solution. I needed to initialize the Google map in the "pagecreate" jQuery Mobile event instead of on $(document).ready. I also had a problem with the full map not rendering properly everytime the page showed so I solved that by calling google.maps.event.trigger(map, 'resize') to refresh the map on the "pageshow" jQuery Mobile event.
Here is my code:
index.html
map1.html
map2.html