Question

使用jQuery Mobile 1.4和Google Maps JavaScript API v3的Phonegap应用。

地图需要几秒钟才能在移动设备上加载，有时会更长。我正在尝试“预加载”地图页面，以便在用户导航到该页面时立即显示。

我试过的一些事情都失败了：

$.mobile.pageContainer.enhanceWithin();在app load上创建页面。它会创建地图，但除非在页面显示中触发调整大小，否则不会显示地图。

在app load上创建地图，然后在pageshow上触发地图大小调整，以便刷新地图大小。也许有点快，但仍然需要等待，因为原始地图没有呈现正确的大小，所以你需要调整大小。

手动设置地图容器的css高度/宽度，并在应用启动时加载地图。正确的容器大小，但仍然需要触发调整大小。

最佳解决方案是在应用程序加载的后台加载完整的地图页面（加上一些额外的图块以防滚动），然后当用户导航到它时，它已经传播。

Answer 1

首页完全加载并显示后，您可以通过加载地图画布来实现此目的。但是，地图画布应放在当前视口中不可见的div中。在地图画布上使用display: none;会破坏结构，并在将其从div移动到另一个时无响应。

另一个重要的注意事项， content div的高度在创建页面之前和之后总是 0 。因此， content div的高度应该是预定义的，以便在后台加载地图画布后容纳它。

第一步：

在任何页面div 之外创建一个地图占位符，并通过更改它{{1}确保它不在 viewport 视图中CSS属性。在地图占位符内，添加地图画布 div。此外，请移除内容 div position以填充整个可用区域。
- HTML
```
padding
```
- CSS
```
<div id="mapPH">
  <div id="map-canvas"></div>
</div>
```
第二步：

在任何jQM的页面事件上，只需将地图加载到地图画布一次#mapPH { position: absolute; top:-999; z-index: -9999; } .ui-content { padding: 0; }。一旦完全加载，移动到其“新父级”。您可以通过收听.one()事件加载自动移动，也可以移动一次以更改为地图页面。

tilesloaded

第三步：

这是棘手的部分，地图画布的尺寸（宽度和高度）。正如我之前提到的， content div的高度应该手动或使用以下函数动态预定义。

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, -4.9525), 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(); });

加载地图画布以及移动时，应调用该函数。但是，要获得实际尺寸，此处需要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", canvasPage).outerHeight(), newHeight = screen - header - footer; $(canvas).height(newHeight); $(canvas).width($(window).width()); }，因为您要移动的页面仍未创建。当页面未创建时，您将无法在页面中获得元素的实际/真实高度。

更新：地图画布的尺寸应在两个事件setTimeout()和throttledresize上更新。

orientationchange

以下是完整的代码以获得更多说明。

$(window).on("throttledresize orientationchange", function () { canvasHeight("#map-canvas"); });

<强> Demo

有没有办法用jquery mobile预加载谷歌地图？

1 个答案: