另一个重要的注意事项,内容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