使用jQuery Mobile 1.4和Google Maps JavaScript API v3的Phonegap应用程序.
地图需要几秒钟才能在移动设备上加载,有时会更长.我正在尝试“预加载”地图页面,以便在用户导航到页面时立即显示.
我试过的一些事情都失败了：
$.mobile.pageContainer.enhanceWithin();在app load上创建页面.它会创建地图,但除非在页面显示上触发调整大小,否则不会显示地图.
在app load上创建地图,然后在pageshow上触发地图调整大小,以便刷新地图大小.也许有点快,但仍然需要等待,因为原始地图没有呈现正确的大小,所以你需要调整大小.
手动设置地图容器的css高度/宽度,并在应用启动时加载地图.正确的容器大小,但仍需要触发调整大小.
解决方法
您可以通过在第一页完全加载并显示后加载地图画布来实现此目的.但是,地图画布应放在当前视口中不可见的div中.使用display：none;在地图画布上将破坏结构,并在将它从div移动到另一个时变得无响应.
另一个重要的注意事项,内容div的高度在创建页面之前和之后始终为0.因此,应该预定义内容div的高度,以便在地图画布加载到后台后容纳地图画布.
>第一步：
在任何页面div之外创建一个地图占位符,并通过更改其位置CSS属性确保它不在视口视图中.在地图占位符内,添加地图画布div.此外,删除内容div填充以填充整个可用区域.
> HTML
<div id="mapPH"> <div id="map-canvas"></div> </div>
> CSS
#mapPH {
position: absolute;
top:-999;
z-index: -9999;
}
.ui-content {
padding: 0;
}
>第二步：
在任何jQM的页面事件上,只能将地图加载到地图画布一次.one().一旦完全加载,移动到其“新父级”.您可以通过收听tilesloaded事件在加载后自动移动它,也可以移动一次以更改为地图页面.
var mapOptions = {
center: new google.maps.LatLng(36.4875,-4.9525),zoom: 16,mapTypeId: google.maps.MapTypeId.HYBRID,mapTypeControl: false,streetViewControl: false,zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
};
var map = new google.maps.Map($(canvas)[0],mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(36.4875,map: map,title: 'Hello World!'
});
/* move map once fully loaded
by listening to "tilesloaded".
Remove "placeholder" after moving the map */
google.maps.event.addListener(map,'tilesloaded',function () {
$("#map .ui-content").append($("#mapPH #map-canvas"));
$("#mapPH").remove();
});
/* or choose any other method to move it */
$(".selector").on("click",function () {
$("#map .ui-content").append($("#mapPH #map-canvas"));
$("#mapPH").remove();
});
>第三步：
这是棘手的部分,地图画布的尺寸(宽度和高度).正如我之前提到的,内容div的高度应该手动或使用以下函数动态预定义.
function canvasHeight(canvas) { /* canvas = map's canvas ID */
var canvasPage = $(canvas).closest("[data-role=page]").length !== 0 ? $(canvas).closest("[data-role=page]") : $(".ui-page").first(),screen = $.mobile.getScreenHeight(),header = $(".ui-header",canvasPage).hasClass("ui-header-fixed") ? $(".ui-header",canvasPage).outerHeight() - 1 : $(".ui-header",canvasPage).outerHeight(),footer = $(".ui-footer",canvasPage).hasClass("ui-footer-fixed") ? $(".ui-footer",canvasPage).outerHeight() - 1 : $(".ui-footer",newHeight = screen - header - footer;
$(canvas).height(newHeight);
$(canvas).width($(window).width());
}
加载地图画布以及移动地图画布时,应调用该函数.但是,要获取实际尺寸,此处需要setTimeout(),因为仍未创建要移动到的页面.如果未创建页面,则不会获得该页面中元素的实际/真实高度.
更新：地图画布的尺寸应在两个事件,throttledresize和orientationchange上更新.
$(window).on("throttledresize orientationchange",function () {
canvasHeight("#map-canvas");
});
以下是完整的代码以获得更多说明.
/* map canvas dimensions */
function canvasHeight(canvas) {
var canvasPage = $(canvas).closest("[data-role=page]").length !== 0 ? $(canvas).closest("[data-role=page]") : $(".ui-page").first(),newHeight = screen - header - footer;
$(canvas).height(newHeight);
$(canvas).width($(window).width());
}
/* map canvas loading */
function loadMap(canvas) {
var mapOptions = {
center: new google.maps.LatLng(36.4875,zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
};
var map = new google.maps.Map($(canvas)[0],mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(36.4875,title: 'Hello World!'
});
/* option 1: moving map once loaded */
google.maps.event.addListener(map,function () {
$("#map .ui-content").append($("#mapPH #map-canvas"));
$("#mapPH").remove();
});
}
/* load map in background
once first page is shown
and update its' dimensions */
$(document).one("pagecontainershow",function () {
canvasHeight("#map-canvas");
loadMap("#map-canvas");
/* option 2: move map on "click"
and update its' dimensions */
$(".showMap").one("click",function () {
$("#map .ui-content").append($("#mapPH #map-canvas"));
setTimeout(function () {
canvasHeight("#map-canvas");
},500);
$("#mapPH").remove();
});
});
/* update map canvas dimensions
when window is resized and changing orientation */
$(window).on("throttledresize orientationchange",function () {
canvasHeight("#map-canvas");
});
07000
