Google Map Api Ошибка недопустимого значения

Question

Я создал следующий код, используя API Карт Google, который должен сделать линию направления на Картах Google между двумя заданными адресами. Мой код:

function initMap() 
 
{ 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 8, 
 
      center: {lat: -34.397, lng: 150.644} 
 
     }); 
 

 
    var directionsService = new google.maps.DirectionsService(); 
 
    
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
     map: map 
 
    }); 
 
\t \t 
 
    var geocoder = new google.maps.Geocoder(); 
 
    
 
    var pointA,pointB; 
 
    
 

 
     geocoder.geocode({'address': document.getElementById('addressFrom').value}, function(results, status) { 
 
\t \t var location = results[0].geometry.location; 
 
\t \t pointA = new google.maps.LatLng(location.lat(),location.lng()); 
 
\t \t alert(location.lat() + '' + location.lng()); 
 
\t \t }); 
 
\t \t 
 

 
     geocoder.geocode({'address': document.getElementById('addressTo').value}, function(results, status) { 
 
\t \t var location = results[0].geometry.location; 
 
\t \t pointB = new google.maps.LatLng(location.lat(),location.lng()); 
 
\t \t alert(location.lat() + '' + location.lng()); 
 
\t \t }); 
 
\t 
 
\t var markerA = new google.maps.Marker({ 
 
     position: pointA, 
 
     title: "point A", 
 
     label: "A", 
 
     map: map 
 
    }); 
 
\t 
 
\t var markerB = new google.maps.Marker({ 
 
     position: pointB, 
 
     title: "point B", 
 
     label: "B", 
 
     map: map 
 
    }); 
 
\t 
 
\t calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); 
 
} 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) { 
 
    directionsService.route({ 
 
    origin: pointA, 
 
    destination: pointB, 
 
    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); 
 
    } 
 
    }); 
 
}

<input id="addressFrom" type="textbox" value="Sydney"> 
 
<input id="addressTo" type="textbox" value="London"> 
 
<input id="submit" type="button" value="Geocode" onclick="initMap"> 
 
<div id="map"></div>

я получаю следующие ошибки при проверке из браузера:

Answer 1

Геокодер является асинхронным, результаты не возвращаются до тех пор, пока вы не поместите вызов в службу маршрутов.

Подсказка эта ошибка в консоли JavaScript: Uncaught TypeError: Не удается прочитать свойство «л» в нуль

Chain Геокодер звонки (не знаю, почему вы нужны те, служба направления принимает адреса просто отлично), переместите вызов службы маршрутов в функцию обратного вызова для второй операции с геокодом (так что оба места доступны при вызове службы маршрутов).

Другая проблема заключается в том, что вы не можете ездить из Сиднея в Лондон.

фрагмент кода:

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 8, 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    } 
 
    }); 
 

 
    var directionsService = new google.maps.DirectionsService(); 
 

 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map 
 
    }); 
 

 
    var geocoder = new google.maps.Geocoder(); 
 

 
    var pointA, pointB; 
 

 

 
    geocoder.geocode({ 
 
    'address': document.getElementById('addressFrom').value 
 
    }, function(results, status) { 
 
    if (status != "OK") return; 
 
    var location = results[0].geometry.location; 
 
    pointA = new google.maps.LatLng(location.lat(), location.lng()); 
 
    alert(location.lat() + ',' + location.lng()); 
 
    var markerA = new google.maps.Marker({ 
 
     position: pointA, 
 
     title: "point A", 
 
     label: "A", 
 
     map: map 
 
    }); 
 
    geocoder.geocode({ 
 
     'address': document.getElementById('addressTo').value 
 
    }, function(results, status) { 
 
     if (status != "OK") return; 
 
     var location = results[0].geometry.location; 
 
     pointB = new google.maps.LatLng(location.lat(), location.lng()); 
 
     alert(location.lat() + ',' + location.lng()); 
 
     var markerB = new google.maps.Marker({ 
 
     position: pointB, 
 
     title: "point B", 
 
     label: "B", 
 
     map: map 
 
     }); 
 
     calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); 
 
    }); 
 
    }); 
 
} 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) { 
 
    directionsService.route({ 
 
    origin: pointA, 
 
    destination: pointB, 
 
    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); 
 
    } 
 
    }); 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="addressFrom" type="textbox" value="Sydney" /> 
 
<input id="addressTo" type="textbox" value="London" /> 
 
<input id="submit" type="button" value="Geocode" onclick="initMap()" /> 
 
<div id="map"></div>

Answer 2

При вызове функции calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); позиции pointA и pointB не определены потому что они являются результатом асинхронного вызова geocoder.geocode.

Перемещение вызова на calculateAndDisplayRoute функцию после того, как вы получили результат от geocoder.geocode

geocoder.geocode({ 
    'address': document.getElementById('addressTo').value 
    }, function(results, status) { 
    var location = results[0].geometry.location; 
    poi 

if (status == google.maps.GeocoderStatus.OK) { 
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); 
    } 

Поскольку вы отправляете два запроса геокодирования вам нужно будет ждать статуса геокодера для каждого запроса.