未找到Javascript/jQuery谷歌地图路线

Question

我有一个应用程序显示数据库中的邮编，当点击一个按钮时邮政编码在弹出窗口中作为标记在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不知道如何创建从“”到“”的路由。

一旦我解决了这个问题（使用包含postcode的post1和post2），我得到一个JavaScript错误：Uncaught ReferenceError：directionsDisplay没有定义。

修复显示我的路线。

proof of concept fiddle

代码片段：

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

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<script src="https://maps.google.com/maps/api/js"></script> 
 
<div id="map" style="display: none;"> 
 
</div> 
 
<span class='post1'>G1 3SL</span> 
 
<span class='post2'>G1 2AF</span> 
 
<br/> 
 
<button class='openMap'>View On Map</button> 
 
<br/> 
 
<span id="route1"></span> 
 
<span id="route2"></span>