Jquery Mobile 谷歌地图,我必须刷新页面才能显示地图
Posted
技术标签:
【中文标题】Jquery Mobile 谷歌地图,我必须刷新页面才能显示地图【英文标题】:Jquery Mobile google maps , i have to refresh the page to show map 【发布时间】:2013-06-02 23:36:57 【问题描述】:我正在制作一个在地图上显示位置的应用程序,我有一个链接到地图的页面,当我单击该链接时,它会在不加载地图的情况下更改为地图页面。
所以我必须点击浏览器后退按钮并刷新有链接的页面,然后我再次点击链接并此时加载地图,所以如果你能帮助我加载地图而不刷新我将不胜感激
<div data-role="page">
<div data-role="header">
<a href="menudep.jsp" data-icon="back" data-theme="c">Atras</a>
<h1><%=corto%></h1>
<h4><img src="../images/logo_mich.png" /></h4>
<a href="mobilelaip.html" data-icon="home" data-theme="c">Inicio</a>
</div>
<div data-role="content">
<p>
<%=descrip%>
</p>
<a href="map3.html">Ubicación</a>
<ul data-role="listview" data-inset="true">
<li><a href="oficio.jsp?dep=<%=id_dep%>">Info. Oficio</a></li>
<li><a href="contacto.jsp?dep=<%=id_dep%>" data-rel="dialog">Contacto</a></li>
<li><a href="paginaweb.jsp?dep=<%=id_dep%>" data-inline="true" data-rel="dialog">Pagina Web</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function()
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(function(position)
initialize(position.coords.latitude,position.coords.longitude);
);
);
function initialize(lat,lng)
var latlng = new google.maps.LatLng(lat, lng);
var myOptions =
zoom: 20,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
new google.maps.Marker (
map : map,
animation : google.maps.Animation.DROP,
position : latlng
);
</script>
而map3.html代码是这样的
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Mapa</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
感谢您的回答
【问题讨论】:
【参考方案1】:关于您的代码的一些事情,其中一些可能是一个问题。我不能 100% 确定,因为我只能看到您的部分代码。
据我所知,您正在使用多个 html 页面来展示您的应用程序。 jQuery Mobile 使用 ajax 加载附加页面(除非关闭此功能),因此加载附加页面的 HEAD 内容毫无意义,更何况,jQuery Mobile
只会加载 DIV
与 data-role="page"
而其他所有内容都将被丢弃。如果您的 javascript 被放置在 HEAD
内或 BODY
内容的末尾,基本上是页面外的任何位置 DIV
它会被移除。按照 this 或 this 解决方案来解决此问题。
我可以看到的其他问题是 live 方法,如果在错误的时刻初始化它仍然可以使用(从 jQuery 1.9
及更高版本中删除)它不会正确触发。所以改成这样:
$(document).on('pagecreate', '.page-map', function()
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(function(position)
initialize(position.coords.latitude,position.coords.longitude);
);
);
第三件事,这一行:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
必须在 jQuery 和 jQuery Mobile 之前初始化,所以在你的主 html 文件中初始化它。
最后这里是我的博客article,关于谷歌地图的jQuery Mobile 实现。如果您需要更多信息,请随时发表评论。
【讨论】:
感谢您的回答,我会尝试并告诉您它是否有效,但是在您所说的第三件事中,我必须在此文件之外进行初始化? 你需要在你的第一个和 mani HTML 文件中初始化它。【参考方案2】:这里有一些我成功使用的示例代码。 我用的插件:https://code.google.com/p/jquery-ui-map/
为了不必刷新,你可以使用“pageshow”事件。
索引
<div data-role="page" id="pagWienerMundo" data-theme="a">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/jquery-ui-map.min.js" type="text/javascript"></script>
<div role="main" class="ui-content">
<div id="map_canvas">
</div>
</div><!-- /content -->
</div><!-- /page map -->
JAVASCRIPT
$(document).on("pageshow","#pagMap", function ()
if (!(typeof google === 'object' && typeof google.maps === 'object'))
$("#map_canvas").empty().append('<h3 style="color:#db393b;text-align:center">Connect to internet</h3>');
else
$("#pagWienerMundo [role='main']").css("padding","0em");
$('#map_canvas').css("width", "100%");
$('#map_canvas').css("height", "450px");
$('#map_canvas').gmap().bind('init', function()
$.each( mapObj, function(i, marker)
$('#map_canvas').gmap('addMarker',
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'bounds': true
).click(function()
$('#map_canvas').gmap('openInfoWindow', 'content': marker.content , this);
);
);
);
);
JSON
mapObj=
[
"content" : "Example text to show on marker",
"latitude": -32.95845,
"longitude": -60.66764,
]
假设您在本地和范围内有 json 对象(例如声明为全局)
【讨论】:
谢谢我去看看以上是关于Jquery Mobile 谷歌地图,我必须刷新页面才能显示地图的主要内容,如果未能解决你的问题,请参考以下文章
谷歌地图方向服务地理定位和地址输入jquery mobile
在 jquery mobile / phonegap 中重新加载外部脚本(即谷歌地图)