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

当您调用函数calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB); 时，位置pointA 和pointB 是未定义的，因为它们是异步调用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);
    }

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

Answer 2

地理编码器是异步的，直到您调用路线服务后才会返回结果。

提示是 javascript 控制台中的此错误：未捕获的类型错误：无法读取 null 的属性 'l'

链接地理编码器调用（不知道为什么需要这些，路线服务可以很好地获取地址），将对路线服务的调用移动到第二次地理编码操作的回调函数中（因此当路线服务时两个位置都可用被调用）。

另一个问题是你不能从悉尼开车到伦敦。

代码 sn-p：

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>