jquery移动谷歌地图间歇性显示

嗨，伙计们在修复了我正在处理的项目的一个问题后，我已经遇到了另一个问题，现在我知道这个问题已经被问了很多次，但我找到的解决方案似乎没有区别。

所以我基本上是在尝试将一种获取方向类型的函数集成到我的应用程序中，我基本上是从 API 的演示中获取的，它本身可以完美运行，但是当我将其添加到代码中时，它会间歇性地工作，有时它在那里有时它没有，有时它的一半在那里，只有在刷新时才会完全显示。

我已经在下面包含了与项目帮助的这一部分相关的代码的主要部分，将不胜感激。

这是 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>

下面是贾夫文

$(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>

我已经看到建议在锚标签中添加rel="external"之类的解决方案，这些内容链接到带有谷歌地图的页面。谁能对此有所了解，我知道之前有人问过这个问题，但我不会像 javascript 那样描述自己，它对我来说只是一个复制和粘贴工作。

谢谢

这是大多数开发人员在使用jQuery Mobile和Google Maps时面临的常见困难。 jQuery Mobile基于Ajax导航来加载，呈现和显示页面。与HTTP不同，HTTP中所有元素都同时加载和显示。

jQuery Mobile 中的页面会经历多个页面事件，它以pagebeforecreate开头，以pageshow结尾 -pagechange是最后一个但很少使用。在这些事件中，页面得到增强/呈现，但仍未完全准备好显示，因为主div 的高度仍未设置。

但是，在pageshow设置和定义了主div的高度，除了内容divdata-role="content"它取决于其中的元素。

话虽如此，初始化谷歌地图应该在事件pageshow进行。使用任何其他事件将加载不完整的地图。另一个注意事项是，应重置内容div的高度，以完全容纳地图。我已经为所有jQuery Mobile版本详细编写了完整的解决方案。

CSS- 删除内容的divpadding并设置地图的divheight和width。

#map-canvas {
width: 100%;
height: 100%;
}
.ui-content {
padding: 0;
}

JS- 在事件pageshow初始化映射。如果是整页地图(无工具栏)，请根据视口重置内容div 的height和width。请记住，应在orientationchange和throttledresize事件上重置内容div 的维度。

$(document).on("pageshow", "#mapPage", function () {
$(".ui-content", this).css({
height: $(window).height(),
width: $(window).width()
});
InitilizeMap();
});

如果只想初始化一次，也可以使用.one()代替.on()。

奖励- 整页地图的后退按钮，在地图完全初始化后附加到idle事件中。

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);
});

"后退"按钮 CSS

.forMap {
position: absolute;
top:0;
left:0;
}

演示

引用：

jQuery Mobile 1.2 事件 -pageshow
预加载谷歌地图 - 答案/博客
内容div 维度 - 答案/博客
谷歌地图活动 -idle/dragstart/dragend

相关内容

最新更新

热门标签：