Google地图Api无效值错误 [英] Google Map Api Invalid Value Error

问题描述

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

I have created the following code using Google Maps API that should make a direction line on Google Maps between two given addresses. My Code is:

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>

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

I get the following errors when inspecting from the browser:

推荐答案

地理编码器是异步的，结果不会在您将指令服务调用后才会返回。

The geocoder is asynchronous, the results don't come back until after you place the call to the directions service.

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

A hint is this error in the javascript console: Uncaught TypeError: Cannot read property 'l' of null

链接地理编码器调用需要这些，方向服务采取地址很好），将方向服务的调用移动到第二个地理编码操作的回调函数中（因此当方向服务被调用时，这两个位置都可用）。

Chain the geocoder calls (not sure why you need those, the directions service takes addresses just fine), move the call to the directions service into the callback function for the second geocode operation (so both locations are available when the directions service is called).

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

Another problem is you can't drive from Sydney to London.

代码段：

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>

这篇关于Google地图Api无效值错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！