jquery移动谷歌地图显示断断续续 [英] jquery mobile google maps showing intermittently
问题描述
嗨家伙在修正了一个问题的项目后，我正在努力，我打了另一个，现在我知道这个问题，已经问了好多次，但我发现的解决方案似乎没有做区别。
所以我基本上是试图将一个获取方向的函数集成到我的应用程序，我基本上从API的演示，它完全工作在它的自己，但当我把它添加到代码它的工作非常非常非常间歇性，有时它的有时它的不，有时它的一半，并且只有显示完全刷新时。
I
这是HTML的缩减形式
< html lang =en>
< head>
< meta charset =utf-8/>
< meta content =enhttp-equiv =content-language>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css/>
< script src =http://code.jquery.com/jquery-1.8.2.min.js>< / script>
< script src =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js>< / script>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?v=3&sensor=false&language=en>< /脚本>
< / head>
< body>
< div data-role ='page'id =考古data-theme =b>
< header data-role =header>
< h1>国立考古博物馆< / h1>
< a href ='＃Museums'data-icon ='back'>返回< / a>
< / header>
< p>在爱尔兰找到的所有考古学对象的国家信息库，拥有200多万件文物。 < / p>
< div data-role =content>
< div id =container>
< img src =ARchBackground.jpgstyle =height：100％; width：100％;/>
< / div>
< / div>
< ul data-role =listview>
< li>
< / li>
< li>
< / li>
< li>
< / li>
< li>
< a href =＃Archmap_pagedata-theme =id =arch_gmap> < img src =arch.gifwidth =150height =150 =external> < br />在google地图上找到我们< / a>
< / li>
< / ul
< div data-role =pageid =Archmap_page>
< header data-role =header>
< h1>国立考古博物馆< / h1>
< a href ='＃Archaeology'data-icon ='back'>返回< / a>
< / header>
< div data-role =content>
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;>
< div id =map_canvasstyle =height：200px; width：500px;>< / div>
< div data-role =fieldcontain>
< label for =from> From< / label>
< input type =textid =fromvalue =在此输入您的位置/>
< / div>
< div data-role =fieldcontain>
< label for =至>至< / label>
< input type =textid =tovalue =爱尔兰国家博物馆，考古学/>
< / div>
< div data-role =fieldcontain>
< label for =modeclass =select>交通方式：< / label>
< select name =select-choice-0id =mode>
< option value =DRIVING>驾驶< / option>
< option value =WALKING>步行< / option>
< option value =BICYCLING>骑自行车< / option>
< / select>
< / div>
< a data-icon =searchdata-role =buttonhref =＃id =submit>获取路线< / a>
< / div>
< div id =resultsstyle =display：none;>
< div id =directions>< / div>
< / div>
< / div>
< / div>
下面是javscript
p>
$（document）.delegate（'＃Archmap_page'，'pageinit'，function（）{
navigator.geolocation。 getCurrentPosition（initialize）;
}）;
$（document）.on（'click'，'#submit'，function（e）{
e.preventDefault（）;
calculateRoute（）;
}）;
var directionDisplay，
directionsService = google.maps.DirectionsService（），
map;
function initialize（）
{
directionsDisplay = new google.maps.DirectionsRenderer（）;
var mapCenter = new google.maps.LatLng（53.340617，-6.255244）;
var myOptions = {
zoom：30，
mapTypeId：google.maps.MapTypeId.ROADMAP，
center：mapCenter
}
map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
directionsDisplay.setMap（map）;
directionsDisplay.setPanel（document.getElementById（directions））;
}
函数calculateRoute（）
{
var selectedMode = $（＃mode）。val（），
start = #from）。val（），
end = $（＃to）。val（）;
if（start ==''|| end ==''）
{
//无法计算路由
$（＃results）。 （）;
return;
}
else
{
var request = {
origin：start，
目标：end，
travelMode：google.maps.DirectionsTravelMode [selectedMode]
};
directionsService.route（request，function（response，status）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;
$（＃results）。show（）;
/ *
var myRoute = response.routes [0] .legs [0];
for（var i = 0; i< myRoute.steps.length; i ++）{
alert（myRoute.steps [i] .instructions）;
}
* /
}
else {
$（＃results）。hide（）;
}
}）;
}
}
< / script>
我看过解决方案建议添加 rel =external / code>在链接到带有google地图的页面的锚定标记中。任何人都可以阐明这一点，我知道以前被问过，但我不会描述自己像javascript一样好，它只是一个副本和粘贴工作，我在这里。
感谢
这是大多数开发人员面临的常见问题使用jQuery Mobile和Google地图。 jQuery Mobile基于Ajax 导航来加载，呈现和显示页面。与HTTP不同，其中所有元素都被加载并一次显示。
jQuery Mobile中的一个页面通过几个页事件， code> pagebeforecreate 结尾为 pageshow - pagechange 但很少使用 - 。在这些活动期间，页面会被增强/呈现，但仍未完全准备好显示，因为主div的高度仍未设置。
但是，除了content div 之外，还要设置和定义
pageshow 这就是说，初始化 Google地图应该在 pageshow 事件期间发生。使用任何其他事件将加载不完整的地图。另一个注意事项，内容div的 height 应重置为了完全适应地图。我已详细写了所有jQuery Mobile版本的完整解决方案。
CSS - 删除内容的div padding 并设置map的div height 和 width 。
＃map-canvas {
width：100％ ;
height：100％;
}
.ui-content {
padding：0;
}
JS - 在 pageshow 事件。如果它是一个完整的页面映射（没有工具栏），重置内容div的 height 和 width 基于
orientationchange 和 throttledresize 事件中重置。 $（document）.on（pageshow，#mapPage，function（）{
$（。ui-content，this）。 css（{
height：$（window）.height（），
width：$（window）.width（）
}）;
InitilizeMap b}）;
您也可以使用 .one（）
奖金
strong> - 完整页面映射的后退按钮，在映射完全初始化后附加到空闲事件。 google.maps.event.addListenerOnce（map，'idle'，function（e）{
$（＃map-canvas）。append（$（< a href ='＃'data-role ='button'data-rel ='back'class ='forMap'> Back< / a>）。hide（）。fadeIn（300））;
$ .forMap）。buttonMarkup（{
mini：true，
inline：true，
corner：false
}）;
}
google.maps.event.addListener（map，'dragstart'，function（e）{
$（。forMap）。animate（{
opacity：0.3
}，300）;
}）;
google.maps.event.addListener（map，'dragend'，function（e）{
$（。forMap）。animate（{
opacity： 1
}，700）;
}）;
返回按钮CSS
.forMap {
position：absolute;
top：0;
left：0;
}
参考资料：
- jQuery Mobile 1.2 events -
pageshowli>
- 预先加载Google地图 - 回答 / 博客
- 内容div维度 - 回答 / Blog
- Google地图活动 -
空闲/dragstart// code>
Hi guys after fixing one problem with the project I'm working on I've hit another on, now I know this question as been asked quite a good few times but the solutions I have found don't seem to make a difference.
So I'm basically trying to integrate a get directions kind of function into my app, which I have basically taken from the demos of the API, It works perfectly on its own but when I add it to the code it works very very very intermittently, sometimes its there sometimes its not and sometimes its half there and only shows fully when refreshed .
I have included the main parts of the code below that relate to this section of the project help would be appreciated.
This is a reduced form of the HTML
<html lang ="en">
<head>
<meta charset ="utf-8"/>
<meta content="en" http-equiv="content-language">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
</head>
<body>
<div data-role ='page' id = "Archaeology" data-theme ="b" >
<header data-role = "header">
<h1>The National Museum of Archaeology</h1>
<a href='#Museums' data-icon = 'back'>Back</a>
</header>
<p>The national repository for all archaeological objects found in Ireland and home to over two million artefacts. </p>
<div data-role="content" >
<div id="container">
<img src="ARchBackground.jpg" style= "height:100%; width: 100%;"/>
</div>
</div>
<ul data-role = "listview">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
<a href="#Archmap_page" data-theme="" id="arch_gmap"> <img src="arch.gif" width="150" height="150" rel="external" > <br/> Find us on google maps </a>
</li>
</ul
<div data-role="page" id="Archmap_page">
<header data-role = "header">
<h1>The National Museum of Archaeology</h1>
<a href='#Archaeology' data-icon = 'back'>Back</a>
</header>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:200px; width: 500px;"></div>
<div data-role="fieldcontain">
<label for="from">From</label>
<input type="text" id="from" value="Enter your location here"/>
</div>
<div data-role="fieldcontain">
<label for="to">To</label>
<input type="text" id="to" value="The National Museum of Ireland, Archaeology "/>
</div>
<div data-role="fieldcontain">
<label for="mode" class="select">Transportation method:</label>
<select name="select-choice-0" id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
</div>
<a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
</div>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
Below is the javscript
$(document).delegate('#Archmap_page', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
$(document).on('click', '#submit', function(e) {
e.preventDefault();
calculateRoute();
});
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map;
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var mapCenter = new google.maps.LatLng(53.340617, -6.255244);
var myOptions = {
zoom:30,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}
function calculateRoute()
{
var selectedMode = $("#mode").val(),
start = $("#from").val(),
end = $("#to").val();
if(start == '' || end == '')
{
// cannot calculate route
$("#results").hide();
return;
}
else
{
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
$("#results").show();
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
}
else {
$("#results").hide();
}
});
}
}
</script>
I have seen solutions that advise adding things like rel="external" in the anchor tags linking to a page with a google map. Can anyone shed some light on this I know its been asked before, but I wouldn't describe myself as good as javascript its more just a copy and paste job for me here.
Thanks
This is common difficulty most of developers face when using jQuery Mobile and Google Maps. jQuery Mobile is based on Ajax navigation to load, render and show pages. Unlike HTTP, where all elements are loaded and shown at once.
A page in jQuery Mobile passes through several page events, it starts with pagebeforecreate and ends with pageshow -pagechange is last but rarely used-. During those events, a page gets enhanced/rendered but still not fully ready to be shown, as height of main divs is still unset.
However, on pageshow height of main divs is set and defined, except for content div data-role="content" which depends on elements within.
This being said, initializing Google Maps should occur during pageshow event. Using any other event will load an incomplete map. Another note, height of content div should be reset in order to fully accommodate map. I have written in details a full solution for all jQuery Mobile versions.
CSS - Remove content's div padding and set map's div height and width.
#map-canvas {
width: 100%;
height: 100%;
}
.ui-content {
padding: 0;
}
JS - Initialize map on pageshow event. If it's a full page map (no toolbars), reset content div's height and width based on viewport. Remember that content div's dimensions should be reset on orientationchange and throttledresize events.
$(document).on("pageshow", "#mapPage", function () {
$(".ui-content", this).css({
height: $(window).height(),
width: $(window).width()
});
InitilizeMap();
});
You can also use .one() instead of .on() if you want to initialize it one time only.
Bonus - Back button for full page map, to be appended on idle event after map is fully initialized.
google.maps.event.addListenerOnce(map, 'idle', function (e) {
$("#map-canvas").append($("<a href='#' data-role='button' data-rel='back' class='forMap'>Back</a>").hide().fadeIn(300));
$(".forMap").buttonMarkup({
mini: true,
inline: true,
corners: false
});
});
google.maps.event.addListener(map, 'dragstart', function (e) {
$(".forMap").animate({
"opacity": 0.3
}, 300);
});
google.maps.event.addListener(map, 'dragend', function (e) {
$(".forMap").animate({
"opacity": 1
}, 700);
});
Back button CSS
.forMap {
position: absolute;
top:0;
left:0;
}
References:
- jQuery Mobile 1.2 events -
pageshow - Preload Google Maps - Answer / Blog
- Content div dimensions - Answer / Blog
- Google Maps Events -
idle/dragstart/dragend
这篇关于jquery移动谷歌地图显示断断续续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
