我使用jQuery Mobile和Google Maps V3构建了一个Cordova Android应用程序。
地图可以正常工作一段时间,但是当我尝试缩放或拖动地图4-5次时,应用会冻结。如果我清理缓存/ RAM,它只能再次工作。我使用了自定义标记,标记位置来自SQLite数据库。
<div data-role="page" data-theme="f" id="Gomap" style="width:100%; height:100%;">
<div role="banner" class="ui-bar-a ui-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-theme="f" href="branch_locator.html" data-rel="back" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">
Back
</span>
<span class="ui-icon ui-icon-arrow-l ui-icon-shadow">
</span>
</span>
</a>
<h1 aria-level="1" role="heading" tabindex="0" class="ui-title">
Google Map
</h1>
</div>
<div data-role="content" class="map" id="content">
<div id="map_canvas" style="height:100%;">
<div class="img-container"><img src="img/loading8.gif" /> </div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="foot">
</div>
<!-- /footer -->
<script type="text/javascript" src="js/map.js"></script>
</div>
map.js
var latt1;
var longg1;
var latt2;
var longg2;
$("#Gomap").on("pageshow", function(e) {
var s = $(this).data("url");
var lat1Part = s.split("&")[0];
var long1Part = s.split("&")[1];
var lat2Part = s.split("&")[2];
var long2Part = s.split("&")[3];
latt1 = lat1Part.split("=")[1];
longg1 = long1Part.split("=")[1];
latt2 = lat2Part.split("=")[1];
longg2 = long2Part.split("=")[1];
loadScript();
});
function initialize() {
$('#map_canvas').empty();
var ur_pos = new google.maps.LatLng(latt1, longg1);
var br_pos = new google.maps.LatLng(latt2, longg2);
$('#map_canvas').gmap();
$('#map_canvas').gmap({
'center': ur_pos
});
$('#map_canvas').gmap({
'zoom': 6
});
$('#map_canvas').gmap('addMarker', {
'position': br_pos,
'bounds': true,
'icon':'img/logo.png',
'animation': google.maps.Animation.DROP
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Some Text Here</B>'
}, this);
});
$('#map_canvas').gmap('addMarker', {
'position': ur_pos,
'bounds': true,
'animation': google.maps.Animation.DROP
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', {
'content': '<B>Your Current Position</B>'
}, this);
});
$('#map_canvas').gmap('refresh');
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=GMAP KEY HERE&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}