未找到Javascript / jQuery Google地图路线

我有一个应用程序，它显示数据库中的邮政编码，当点击一个按钮时，邮政编码被地理编码并在弹出窗口的谷歌地图上显示为标记。 我试图在地图上显示两个标记之间的行车路线。 我已将地理编码值保存到HTML span标记中，并且我尝试将这些值用作路径的起点和终点。 除标记之间显示的路线外，所有内容都有效，显示错误消息“路由请求因NOT_FOUND而失败”。

知道如何让路线出现吗？

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

Answer 1

route1和route2为空。 API不知道如何创建从“”到“”的路由。

一旦我解决了（使用包含邮政编码的post1和post2），我得到一个javascript错误：未捕获的ReferenceError：没有定义directionsDisplay。

修复，显示我的路线。

概念certificate小提琴

代码段：

 $(document).ready(function() { var directionsDisplay; $(".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(); var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), mapOptions); geocoder.geocode({ address: mapLocation }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); 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); } }); console.log("post1:" + $('.post1').text()); console.log("post2:" + $('.post2').text()); directionsService.route({ origin: $('.post1').text(), destination: $('.post2').text(), travelMode: google.maps.TravelMode.DRIVING }, function(response, status) { if (status === google.maps.DirectionsStatus.OK) { if (!directionsDisplay || !directionsDisplay.getMap || (directionsDisplay.getMap() == null)) { directionsDisplay = new google.maps.DirectionsRenderer({ map: map }); directionsDisplay.setMap(map); } directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); $("#map").dialog({ title: "Lift Location ", height: 500, width: 500, modal: true }); $(".selector").dialog({ resizeStop: function(event, ui) { google.maps.event.trigger(map, 'resize'); } }); $(".selector").dialog({ open: function(event, ui) { google.maps.event.trigger(map, 'resize'); } }); }); }); 

     
 
 G1 3SL G1 2AF 
 View On Map