Google Map Api無效值錯誤

我已經使用Google Maps API創建了以下代碼，該代碼應該在Google地圖上給出兩個給定地址之間的方向行。我的代碼是：Google Map Api無效值錯誤

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>

從瀏覽器檢查時，我得到了以下錯誤：

來源

2016-09-29 Syed Lakhtey Hussnain

可能重複（http://stackoverflow.com/questions/38406549/google- maps-api-directions-service-displays-text-directions-repeating） – geocodezip

地理編碼器是異步的，只有將呼叫發送到路線服務後，結果纔會返回。

一個提示這個錯誤是在JavaScript控制檯：遺漏的類型錯誤：無法讀取空

的財產「L」

鏈的地理編碼器調用（不知道爲什麼你需要這些，導航服務需要的地址就好了），將呼叫轉移到方向服務進入第二個地理編碼操作的回調函數（因此在調用方向服務時這兩個位置都可用）。

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

代碼片段：中[谷歌地圖API路線服務顯示文本路線重複]

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>

來源

2016-09-29 21:35:53 geocodezip

感謝geocodezip您的解決方案爲我工作 –

當你調用該函數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); 
    }

既然你發送你需要等待每個請求的地理編碼器地位的兩個地址解析請求得到的結果之後。

來源

2016-09-29 19:09:30 user2314737

Google Map Api無效值錯誤

回答

相關問題