jquery mobile google maps werden zeitweise angezeigt
Hallo Leute, nachdem ich ein Problem mit dem Projekt, an dem ich arbeite, behoben habe, habe ich ein anderes Problem bearbeitet. Jetzt weiß ich, dass diese Frage einige Male gestellt wurde, aber die Lösungen, die ich gefunden habe, scheinen keinen Unterschied zu machen.
Ich versuche also im Grunde, eine Funktion zum Abrufen von Anweisungen in meine App zu integrieren, die ich im Grunde genommen den Demos der API entnommen habe. Sie funktioniert von sich aus perfekt, aber wenn ich sie dem Code hinzufüge, funktioniert sie sehr, sehr, sehr sporadisch , manchmal ist es da, manchmal ist es nicht und manchmal ist es halb da und zeigt sich nur dann, wenn es aufgefrischt ist.
Ich habe die Hauptteile des nachstehenden Codes eingefügt, die sich auf diesen Abschnitt der Projekthilfe beziehen.
Dies ist eine reduzierte Form des 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>
Unten ist das 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>
Ich habe Lösungen gesehen, die das Hinzufügen von Dingen wie empfehlenrel="external" in den Ankertags, die auf eine Seite mit einer Google Map verweisen. Kann jemand etwas Licht ins Dunkel bringen, von dem ich weiß, dass es schon einmal gefragt wurde, aber ich würde mich selbst nicht so gut wie Javascript beschreiben, es ist eher ein Kopier- und Einfügejob für mich.
Vielen Dank