jquery mobile刷新加载地图api v3
Posted
技术标签:
【中文标题】jquery mobile刷新加载地图api v3【英文标题】：jquery mobile refresh to load map api v3 【发布时间】：2014-06-24 22:22:03 【问题描述】：我必须刷新一次页面才能加载地图。 您实际上可以在下面的链接中查看：
http://metartestmobile.netau.net/template/listview.html
当我移动这条线时（
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>)
但我想用那条线..
这是文件listview.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div data-role="page" id="my-page" >
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-divider-theme="f">
<li data-role="list-divider">Weather</li>
<li data-icon="arrow-r"><a href="map.html" data-transition="flip" >Humidity-Rain</a></li>
</ul>
</div>
</div>
</body>
</html>
还有map.html
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="themes/Bootstrap.css">
<script type="text/javascript">
var infowindow;
var map;
function initialize()
var myLatlng = new google.maps.LatLng(38.822590,24.653320);
var myOptions =
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
</script>
</head>
<body onload="initialize()">
<div data-role="content">
<div id="map_canvas" ></div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：jquery mobile 默认使用 ajax 页面加载。 所以改变这个
a href="map.html" data-transition="flip"
到
a href="map.html" data-transition="flip" rel="external"
然后jquery mobile刷新漏洞页面。
【讨论】：
以上是关于jquery mobile刷新加载地图api v3的主要内容，如果未能解决你的问题，请参考以下文章
Jquery Mobile 谷歌地图，我必须刷新页面才能显示地图
jQuery Mobile 和 Google Maps API - 地图未加载到设备上
使用 jquery 调整 Google Maps api v3 DIV 的大小 - 磁贴未正确刷新
无法将谷歌静态地图加载到jquery mobile中的div中