Sta*_*ace 9 google-maps jquery-mobile
我正在使用Jquery Mobile 1.0和Google Maps v3来加载用户位置图.通过直接URL访问时,地图加载正常,但是当从链接访问时,它会窒息并且不会显示任何内容.如果我刷新页面,地图加载正常.
这是一个模拟问题的测试版本的链接:http://stacefelder.com/stacefelder/Tests/index.html 点击"我的地图"以查看......没有.点击刷新以查看地图加载.
这是地图页面标题中的脚本:
<script type="text/javascript">
$('#basic_map').live("pageshow", 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: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
这是地图页面正文中的html:
<div data-role="page" id="basic_map">
<div data-role="header">
<h1>map test 901</h1>
</div>
<div id="map_canvas"></div>
</div>
我也试过pagecreate而不是pageshow没有明显的区别.知道我在这里缺少什么吗？感谢您提出的所有建议!
Cla*_*Liu 14
如果你从另一个页面导航到这个页面,jQM只在你的div [data-role ="page"]标签中引入JS,所以如果你的JS在你的<head>标签中不会被拉入,那么这就是导致你的问题.
同样是的,你应该使用pageinit而不是pageshow,如果你导航回页面等,pageshow会重新启动...如果你有多次加载页面和多个页面具有相同id的问题,那就有一个聪明的伎俩使用最后一个div [data-role ="page"]
jQuery("div:jqmData(role='page'):last").bind('pageinit', function(){
因此,对于无故障的答案,试试这个:
<div data-role="page" id="basic_map">
<script type="text/javascript">
$("div:jqmData(role='page'):last").bind('pageinit', 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: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
<div data-role="header">
<h1>map test 901</h1>
</div>
<div id="map_canvas"></div>
</div>