Question

我使用Google Maps API创建了以下代码，该代码应在两个指定地址之间在Google地图上设置方向线。我的代码是：

＆＃13;

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

＆＃13;

<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>

＆＃13;

从浏览器检查时出现以下错误：

Answer 1

地理编码器是异步的，结果在您将呼叫发送到路线服务之后才会回来。

提示是javascript控制台中的此错误：未捕获的TypeError：无法读取属性＆＃39; l＆＃39;为null

链接地理编码器呼叫（不确定为什么需要它们，路线服务接收地址就好了），将呼叫转移到路线服务进入第二个地理编码操作的回调功能（因此当路线服务时两个位置都可用被称为。）

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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

当您调用函数while choice not in list1: # ... print('Let’s go to times!')时，位置calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);和pointA未定义，因为它们是pointB的异步调用的结果。

从geocoder.geocode

获取结果后，移动calculateAndDisplayRoute函数调用

geocoder.geocode

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

Google Map Api无效值错误

2 个答案: