Google API Route von Herkunft erstellt: Breite/Länge und Ziel: placeId funktioniert nicht

Question

ich google Dokumentation befolgt haben und damit endete:

function nearbySearchCallback(results, status) { 
if (status == google.maps.places.PlacesServiceStatus.OK) { 
    console.log(results.length); 
    for (var i = 0; i < results.length; i++) { 
     var place = results[i]; 

     createInfoWindow(place.name, place.geometry.location); 
     //calculateAndDisplayRoute(place.geometry.location.lat(), place.geometry.location.lng()); 
     calculateAndDisplayRoute(place); 
     break; 
    } 
} 
else if(status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS){ 
    //alert("No matching places"); 
} 
else{ 
    alert("Error!"); 
} 
} 

function calculateAndDisplayRoute(destObj) { 
console.log("id " + destObj.id); 
var selectedMode = "Driving";//document.getElementById('mode').value; 
console.log("start point: " + locationX + ", " + locationY); 
directionsService.route({ 
    origin: {lat: locationX, lng: locationX}, 
    destination: {placeId: destObj.id}, 
    travelMode: google.maps.TravelMode.DRIVING 
}, 
function(response, status) { 
    if (status == 'OK') { 
     directionsDisplay.setDirections(response); 
    } else { 
     window.alert('Directions request failed due to ' + status); 
    } 
}); 
} 

Die Antwort ist: Anfahrt aufgrund NOT_FOUND Anforderung fehlgeschlagen

Warum passiert das? locationX und locationY sind lat/lng von gps und ich bin ziemlich sicher, dass das destObj ein Geschäft in meiner Nähe ist. Warum sagt Google, dass es keine Routen finden kann?

Wenn ich ändern Ursprungs-/Bestimmungs zu beliebigen Orten aus Googles docs:

origin: {lat: 37.77, lng: -122.447}, // Haight. 
destination: {lat: 37.768, lng: -122.511}, // Ocean Beach. 

dann geht es .id

Answer 1

Sie haben einen Tippfehler in Ihrem Code zu arbeiten, ist nicht die placeId im Ort Objekt. Nach the documentation for PlaceResult ist das .place_id.

proof of concept fiddle

Code-Schnipsel:

var geocoder; 
 
var map; 
 
var directionsService = new google.maps.DirectionsService; 
 
var directionsDisplay = new google.maps.DirectionsRenderer; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    directionsDisplay.setMap(map); 
 
    var service = new google.maps.places.PlacesService(map); 
 
    service.nearbySearch({ 
 
    location: map.getCenter(), 
 
    radius: 500, 
 
    type: ['store'] 
 
    }, nearbySearchCallback); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function nearbySearchCallback(results, status) { 
 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
    console.log(results.length); 
 
    var place = results[3]; 
 
    calculateAndDisplayRoute(place); 
 
    } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) { 
 
    //alert("No matching places"); 
 
    } else { 
 
    alert("Error!"); 
 
    } 
 
} 
 

 
function calculateAndDisplayRoute(destObj) { 
 
    console.log("id " + destObj.place_id); 
 
    var selectedMode = "Driving"; 
 
    directionsService.route({ 
 
     origin: { 
 
     lat: map.getCenter().lat(), 
 
     lng: map.getCenter().lng() 
 
     }, 
 
     destination: { 
 
     placeId: destObj.place_id 
 
     }, 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }, 
 
    function(response, status) { 
 
     if (status == 'OK') { 
 
     directionsDisplay.setDirections(response); 
 
     } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
     } 
 
    }); 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="map_canvas"></div>