我有一個應用程序顯示數據庫中的郵編,當點擊一個按鈕時郵政編碼在彈出窗口中作爲標記在Google地圖上進行地理編碼和顯示。我試圖在地圖上顯示兩個標記之間的行車路線。我已將經地理編碼的值保存到HTML span標記中,並試圖將這些值用作路由的起點和終點。除了顯示錯誤消息'由於NOT_FOUND引起的方向請求失敗'的標記之間顯示的路線之外,一切都有效。未找到Javascript/jQuery谷歌地圖路線
任何想法如何讓路線顯示?
$(document).ready(function() {
$(".openMap").click(function() {
var directionsService = new google.maps.DirectionsService;
var mapLocation = $(this).prev().prev().prev().text();
var secondMarker = $(this).prev().prev().text();
window.markers = [];
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: mapLocation }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = { center: results[0].geometry.location, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
directionsDisplay.setMap(map);
var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, title: "Departure Location" });
markers.push(marker);
$('#route1').text(results[0].geometry.location);
}
});
var geocoder2 = new google.maps.Geocoder();
geocoder.geocode({ address: secondMarker }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker2 = new google.maps.Marker({ map: map, position: results[0].geometry.location, title: "Destination Location" });
markers.push(marker2);
$('#route2').text(results[0].geometry.location);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].getPosition());
}
map.fitBounds(bounds);
}
});
directionsService.route({
origin: $('#route1').text(),
destination: $('#route2').text(),
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
$("#map").dialog({ title: "Lift Location ", height: 500, width: 500, modal: true });
});
});
我得到你的代碼中的錯誤:'未捕獲的ReferenceError:directionsDisplay不defined' – geocodezip
什麼是你的CSS/HTML看起來像?請提供證明您的問題的[最小,完整,測試和可讀示例](http://stackoverflow.com/help/mcve)。 – geocodezip
https://jsfiddle.net/szw6yg6g/ – perfectDisguise