Google Map Api無效值錯誤

Question

我已使用Google Maps API創建了以下代碼，該代碼應在兩個給定地址之間的Google Maps上做一個方向線。 我的代碼是：

 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) { var location = results[0].geometry.location; pointA = new google.maps.LatLng(location.lat(),location.lng()); alert(location.lat() + '' + location.lng()); }); geocoder.geocode({'address': document.getElementById('addressTo').value}, function(results, status) { var location = results[0].geometry.location; pointB = 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 }); 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); } }); } 

 <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：無法讀取null的屬性“ l”

鏈接地址解析器調用（不確定為什么需要這些地址，路線服務會占用地址就可以了），將對路線服務的調用移至第二個地址解析操作的回調函數中（因此，在調用路線服務時兩個位置均可用） 。

另一個問題是你不能從悉尼開車去倫敦。

代碼段：

 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因為他們的asyncronous調用的結果是不確定的geocoder.geocode 。

從geocoder.geocode獲得結果后，移動calculateAndDisplayRoute函數調用

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

由於您要發送兩個地理編碼請求，因此您需要等待每個請求的地理編碼器狀態。