我在google map using Javascript API v 3 jQuery Mobile中使用Chrome遇到了一些问题。最初在first page地图上加载正常，点击地图上的某个标记后，我就会转到next page。如果我使用browswer back或programatically created back按钮返回该页面，则地图仍可正常加载。但问题是在first page上我使用refresh button I created强制页面重新加载/刷新。点击此标记refresh后点击标记转到next page，现在当我返回时，地图无法正常呈现。整个地图只是在左上角的小版本中呈现。这个问题只存在于Chrome Firefox上，而<script>
$(document).on("pageinit", "#map-page", function(){
....
....
function drawMap(currentLatLng, otherLocations) {
var myMapOptions = {
center: currentLatLng, // center the map to the current geolocation
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myMapOptions);
// Add a current lat/lng geolocation overlay to the map center
var markerCurrentLocation = new MarkerWithLabel({
position: currentLatLng,
map: map,
title: "Current Location!",
labelContent: "Current Location!",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 0.60}
});
var iconImage = 'images/bus.png';
// Add overlays to other locations
$.each(otherLocations, function(index, value){
var markerOtherLocations = new MarkerWithLabel({
position: new google.maps.LatLng(value.latitude, value.longitude),
map: map,
title: value.name+" "+value.distance,
icon: iconImage,
labelContent: value.name+" "+value.distance,
labelAnchor: new google.maps.Point(50, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.60}
});
google.maps.event.addListener(markerOtherLocations, 'click', function() {
$.mobile.changePage("#detail-page", { transition: "flip"} );
});
});
map.fitBounds(latlngbounds);
}
...
...
});
//The refresh function outside of $(document).on("pageinit")
function refreshPage() {
$.mobile.changePage(
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
);
}
</script>
工作正常。
以下是我绘制地图的代码：
multipage 我的jQuery Mobile The mentioned refresh button is on the header模板如下所示：
呈现地图的第一页
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header">
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext">Choose Station</a>
<h1>NextBus Application</h1>
<a href="javascript:refreshPage();" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh</a><!-- The problem arises after clicking this refresh -->
</div><!-- /header -->
<div data-role="content" id="map-canvas"> <!--Div for map display.-->
<!--<p>Page content goes here.</p>-->
</div><!-- /content -->
<div data-role="footer" data-id="myfooter" class="ui-bar" data-position="fixed">
<h4>Copyright 2013 Suyesh Amatya</h4>
</div><!-- /footer -->
</div><!-- /page -->
The mentioned back button is on the header of this page点击第一页上的标记后登陆的下一页
<div data-role="page" id="detail-page">
<div data-role="header">
<a href="#map-page" data-icon="home" data-iconpos="notext" data-rel="back">Back</a>
<h1>Timings for station: </h1>
</div>
<div data-role="content" >
<a href="javascript:someFun();" data-role="button">Generate </a>
<center>
<div id="add_exercise"></div>
</center>
<input id="add_result" />
<a href="javascript:someFun1();" data-role="button">Check</a>
</div>
<div data-role="footer">
<h1>@Copyright</h1>
</div>
</div>
{{1}}