Chr*_*han 5 javascript jquery google-maps google-maps-api-3 jquery-mobile
我正在使用Google Maps JavaScript API在我的移动网站中加载地图.当我从上一页导航时,地图将无法加载,但如果我按预期刷新页面地图加载.如果我在体内使用JavaScript,即使页面没有加载.我无法弄清楚这个问题.它与前一页代码有关吗？
这是我在Head标签中的代码.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $longtitude ?>, <?php echo $latitude ?>);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
</script>
</head>
这是我的身体标签
<body >
<div id="wrapper">
<div class="header">
<a href="index.html"><img src="images/logo-small.png" alt="logo"/></a>
</div>
<div class="back">
<a data-rel="back"><img src="images/back.png"/></a>
</div>
<div id="content">
<div class="list">
<div class="list-items" id="info">
<?php echo "<h3>$sa1<span>$postcode<span>$sa2</span></span></h3><h2>$price</h2>";?>
<br class="clear" />
<br class="clear" />
</div>
</div>
<br class="clear" />
<div id="map-canvas">
</div>
</div>
</div>
</body>
首先,你为什么要使用jQuery Mobile？我在你当前的例子中没有看到这一点.
在这种情况下,jQuery Mobile是主要问题.因为使用了jQuery Mobile,所有内容都将被加载到DOM中.当您"从上一页导航"页面未刷新且此行:
google.maps.event.addDomListener(window, 'load', initialize);
无法触发.仅在手动刷新页面时才会触发.
第二件事,你无法使用jQuery Mobile页面事件而没有任何页面.在你的代码中你有这个部分:
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
为了初始化成功div具有id内容必须有另一个名为data-role ="page"的属性,如下所示:
<div id="content" data-role="page">
</div>
第三件事.让我们假设其他一切都没问题.Pageinit不会从HEAD触发.当jQuery Mobile加载页面时,它会将它们加载到DOM中,并且只加载BODY部分.因此,为了使您的地图工作,您需要将我们的javascript移动到BODY(包括css).在你的第一个例子中它没有用,因为你甚至在非页面div容器上触发了页面.
最后,如果你想正确使用jQuery Mobile,你需要注意正确版本的jQuery与正确版本的jQuery Mobile一起使用.如果你想安全使用jQ 1.8.3和jQM 1.2
这是一个有效的解决方案:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<style>
#map-canvas {
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(33.89342, -84.30715);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location'
});
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).on('pageshow', '#wrapper', function(e, data){
initialize();
});
</script>
<div id="wrapper" data-role="page">
<div class="header">
<h3>Test</h3>
<a href="index.html"><img src="images/logo-small.png" alt="logo"/></a>
</div>
<div id="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
关于该主题的工作实例和更多的信息都可以在此找到文章.
| 归档时间： |
|
| 查看次数： |
18753 次 |
| 最近记录： |