我有一个通过Google地图获取路线的表格。它可以正确获取位置并在地图上绘制路线，但是我在获取要显示在地图下方的路线/路线列表时遇到了麻烦。
我想知道是否有人可以告诉我我下面的代码在哪里出问题，以使指示出现在“ directions” div中？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Find a route using Geolocation and Google Maps API</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function calculateRoute(from, to) {
var entry_latitude = map.getAttribute("data-latitude");
var entry_longitude = map.getAttribute("data-longitude");
var myOptions = {
disableDefaultUI: true,
zoom: 17,
center: new google.maps.LatLng(entry_latitude, entry_longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
// Get the entry address
var to = map.getAttribute("data-address");
// Choose the mode
var transit_mode = $("input[name='radio_travel_type']:radio:checked").val();
//alert(transit_mode);
console.log(transit_mode);
var directionsService = new google.maps.DirectionsService();
if(transit_mode == "DRIVING"){ travelMode = google.maps.DirectionsTravelMode.DRIVING; }
if(transit_mode == "BICYCLING"){ travelMode = google.maps.DirectionsTravelMode.BICYCLING; }
if(transit_mode == "TRANSIT"){ travelMode = google.maps.DirectionsTravelMode.TRANSIT; }
if(transit_mode == "WALKING"){ travelMode = google.maps.DirectionsTravelMode.WALKING; }
var directionsRequest = {
origin: from,
destination: to,
travelMode: travelMode,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
console.log(response);
}
else
$("#error").append("Unable to retrieve your route<br />");
}
);
}
$(document).ready(function() {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == "undefined") {
$("#error").text("Your browser doesn't support the Geolocation API");
return;
}
$("#from-link").click(function(event) {
event.preventDefault();
var addressId = this.id.substring(0, this.id.indexOf("-"));
navigator.geolocation.getCurrentPosition(function(position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
$("#" + addressId).val(results[0].formatted_address);
else
$("#error").append("Unable to retrieve your address<br />");
});
},
function(positionError){
$("#error").append("Error: " + positionError.message + "<br />");
},
{
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
});
});
$("#calculate-route").submit(function(event) {
event.preventDefault();
calculateRoute($("#from").val(), $("#to").val());
});
});
</script>
<style type="text/css">
#map {
width: 500px;
height: 400px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Calculate your route</h1>
<div id="map" data-address="Lincoln, UK" data-zoom="17" data-latitude="53.2333" data-longitude="-0.5333"></div>
<div id="directions"></div>
<form id="calculate-route" name="calculate-route" action="#" method="get">
<label for="from">From:</label>
<input type="text" id="from" name="from" required="required" placeholder="An address" size="30" />
<a id="from-link" href="#">Get my position</a>
<br />
<ul>
<li><input type="radio" name="radio_travel_type" id="radio_driving" value="DRIVING" checked="checked" /> <label for="radio_driving">By car</label></li>
<li><input type="radio" name="radio_travel_type" id="radio_bicycling" value="BICYCLING" /> <label for="radio_bicycling">Cycling</label></li>
<li><input type="radio" name="radio_travel_type" id="radio_transit" value="TRANSIT" /> <label for="radio_transit">By public transport</label></li>
<li><input type="radio" name="radio_travel_type" id="radio_walking" value="WALKING" /> <label for="radio_walking">Walking</label></li>
</ul>
<br />
<input type="submit" />
<input type="reset" />
</form>
<p id="error"></p>
</body>
</html>
调用setPanel上的DirectionsRenderer或设置在面板选项DirectionsRendererOptions
new google.maps.DirectionsRenderer({
map: mapObject,
panel: document.getElementById('directions'),
directions: response
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句