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

由于您要发送两个地理编码请求，因此您需要等待每个请求的地理编码器状态。