有没有办法预装google地图与jquery手机？ [英] Is there a way to preload google map with jquery mobile?
问题描述
使用jQuery Mobile 1.4和Google Maps JavaScript API v3的Phonegap应用程式。
地图需要几秒钟才能在行动装置上载入，有时会更长时间。
我尝试不成功的一些事情：
我试图预加载地图页面，以便在用户导航到页面时立即显示。 $。mobile.pageContainer.enhanceWithin（）; 在应用程序加载时创建页面。
在应用加载时创建地图，然后触发在pagehow上调整地图大小，因此会刷新地图大小。
手动设置css高度/地图容器的宽度并在应用程序启动时加载地图。正确的容器大小，但仍需要触发调整大小。
最佳解决方案是在应用程序的背景中加载完整的地图页面（加上一些额外的瓦片，以防滚动）
您可以通过加载地图画布一次第一页完全加载并显示。但是，地图画布应放置在不是在当前视口中可见的div中。使用地图画布上的 display：none; 会破坏结构，并且在将其从div移动到另一个时会变得无响应。
另一个重要注意事项是，在创建页面之前和之后，内容 div的高度总是 0 。因此，为了在后台加载 地图画布， 必须预先定义div的高度。
-
第一步：
在任何之外创建地图占位符 > page div ，并通过更改
positionCSS属性确保它不在视口视图内。在地图占位符内，添加地图画布 div。此外，移除内容 divpadding以填满整个可用区域。
-
HTML
< div id =mapPH
< div id =map-canvas>< / div>
< / div>
-
CSS
#mapPH {
position：absolute;
top：-999;
z-index：-9999;
}
.ui-content {
padding：0;
}
-
-
strong>第二步：
在任何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，-4.9525），
map：map，
title：'Hello World！'
}）;
/ *移动地图一旦完全加载
通过监听tilesloaded。
移动地图后删除placeholder* /
google.maps.event.addListener（map，'tilesloaded'，function（）{
$（＃map .ui-content ）.append（$（＃mapPH＃map-canvas））;
$（＃mapPH）。remove（）;
}）;
/ *或选择任何其他方法移动它* /
$（。selector）。on（click，function（）{
$ map .ui-content）。append（$（＃mapPH＃map-canvas））;
$（＃mapPH）。remove（）;
}）;
$> -
第三步：
这里有棘手的部分，地图画布的尺寸（宽度和高度）。正如我之前提到的， div的高度应该使用下面的函数手动预定或动态预设。
function canvasHeight（canvas）{/ * canvas = map的canvas ID * /
var canvasPage = $（canvas）.closest（[data-role = page] $（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）;
}）;
/ *地图画布尺寸* /
function canvasHeight ）{
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（））;
}
/ * map canvas load * /
function loadMap（canvas）{
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！'
}）;
/ *选项1：移动地图一旦加载* /
google.maps.event.addListener（map，'tilesloaded'，function（）{
$（＃map .ui-content ）.append（$（＃mapPH＃map-canvas））;
$（＃mapPH）。remove（）;
}）;
}
/ *在后台加载映射
第一页显示
并更新其'dimensions * /
$（document）.one pagecontainershow，function（）{
canvasHeight（＃map-canvas）;
loadMap（＃map-canvas）;
/ * option 2：move映射到点击
并更新其'dimensions * /
$（。showMap）。one（click，function（）{
$（内容）。append（$（＃mapPH＃map-canvas））;
setTimeout（function（）{
canvasHeight（＃map-canvas）;
}，500 ）;
$（＃mapPH）。remove（）;
}）;
}）;
/ *更新地图画布尺寸
当窗口调整大小和改变方向* /
$（窗口）.on（throttledresize orientationchange，function（）{
canvasHeight（＃map-canvas）;
}）;
Phonegap app with jQuery Mobile 1.4 and Google Maps JavaScript API v3.
The map takes a couple seconds to load on a mobile device, sometimes longer. I'm trying to "preload" the map page so it appears instant when the user navigates to the page.
Some things I've tried unsuccessfully:
$.mobile.pageContainer.enhanceWithin();to create pages on app load. It creates the map, but no map display unless resize triggered on pageshow.
Creating map on app load, then triggering a map resize on pageshow, so it refreshes map size. Maybe a bit faster, but still need to wait, as original map not rendered correct size, so you need to resize.
Manually set css height/width of the map container and load map on app startup. Correct container size, but still need to trigger resize.
Optimal solution is to load the full map page (plus some extra tiles in case they scroll) in the background on app load, then when user navigates to it, it's already propagated.
You can achieve this by loading map canvas once first page is fully loaded and shown. However, map canvas should be placed in a div that isn't visible in current viewport. Using display: none; on map canvas will break the structure and becomes unresponsive when you move it from div to another.
Another important note, height of content div are always 0 before and after creating a page. Hence, content div's height should be predefined in order to accommodate map canvas after it is loaded in background.
First step:
Create a map placeholder outside any page div, and make sure it isn't within viewport view by changing it's
positionCSS property. Inside map placeholder, add map canvas div. Moreover, remove content divpaddingto fill the whole available area.HTML
<div id="mapPH"> <div id="map-canvas"></div> </div>CSS
#mapPH { position: absolute; top:-999; z-index: -9999; } .ui-content { padding: 0; }
Second step:
On any jQM's page events, load map into map canvas ONLY one time
.one(). Once it fully loaded, move to its' new parent. You can either move it automatically once loaded by listening totilesloadedevent, or move it once to change to map page.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(); });Third step:
Here comes the tricky part, map canvas's dimensions (width & height). As I've mentioned before, content div's height should either predefined manually or dynamically using the below function.
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()); }That function should be called once map canvas is loaded as well as when moving it. However, to get actual dimensions, a
setTimeout()is required here, since the page you're moving to is still not created. When a page isn't created, you won't get actual/true height of elements within that page.Update: map canvas's dimensions should be updated on two events,
throttledresizeandorientationchange.$(window).on("throttledresize orientationchange", function () { canvasHeight("#map-canvas"); });
Here is the complete code for more clarification.
/* map canvas dimensions */
function canvasHeight(canvas) {
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());
}
/* map canvas loading */
function loadMap(canvas) {
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!'
});
/* option 1: moving map once loaded */
google.maps.event.addListener(map, 'tilesloaded', 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");
});
这篇关于有没有办法预装google地图与jquery手机？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
