我正在使用 jQuery Mobile 和 Google maps jQuery 插件来获取从 A 到 B 的路线,这在 iPhone 上的 safari 中运行良好,但是当我将其设为独立版本(即添加到我的主屏幕)时,地图一旦分类就有两个标记和 tyhe 路线,但没有像在 safari 中那样放大到标记的边界。如果我在按钮上运行 domap() 单击它在独立版本中可以正常工作。当页面加载时,如何让它缩放到 dtandalone 版本的边界?
html
<div id="map_canvas" style="height:250px;width:100%;"></div>
<div data-role="content" style="padding-top:0;">
<a href="#" id="domap" data-icon="refresh" data-iconpos="notext" data-role="button" style="float:right;">reset map</a><br clear="all" />
<div data-role="collapsible" data-theme="a" data-content-theme="c" data-collapsed="false">
<h3>Directions</h3>
<p id="directions"></p>
</div>
</div>
jQuery代码
$('#map').live("pagecreate", function() {
domap();
});
$('#domap').click(function() {
domap();
});
function domap(){
var mobileMap = { 'center': '50.873422,0.011096'};
$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var destination = new google.maps.LatLng('50.873422','0.011096');
$('#map_canvas').gmap('displayDirections', {
'origin': clientPosition,
'destination': destination,
'travelMode': google.maps.DirectionsTravelMode.DRIVING }, {
'panel': document.getElementById('directions')
}, function(success, response) {
if ( !success ) {
$('#map_canvas').gmap('getService', 'DirectionsRenderer').setMap(null);
}
});
}
});
}