在谷歌地图上显示路线网络服务结果时出错

Question

我正在使用 webservices Direction Service API 在谷歌地图上显示路线。 并且无法成功执行 webservices Directions API 文档中提供的示例。此工作流程因以下模棱两可的错误而中断

未捕获的 InvalidValueError：不是 LatLngBounds 或 LatLngBoundsLiteral： 东北未知财产

我可能需要另一双眼睛来研究这个问题。你能帮忙解决这个问题吗？这是我正在尝试执行的代码

setBaseMap();
var directionsUrl = "https://maps.googleapis.com/maps/api/directions/json?origin=sydney,au&destination=perth,au&waypoints=via:-37.81223%2C144.96254%7C-34.92788%2C138.60008&key=AIzaSyDFc2qnwwi91cEflfhXFtojggvFsX6wme8";
sendRequest(directionsUrl, "GET", "true", custimiseDriection, null );

function sendRequest(url, method, isJSON, callback, paramList) {   
    xmlhttp = new XMLHttpRequest();
	xmlhttp.open(method, url, true);
    xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4) {
			if (xmlhttp.status == 200) {
				if (isJSON == "true")
					callback(xmlhttp.responseText, paramList);
				else
					callback(xmlhttp.responseXML, paramList);
			} else {
				alert(xmlhttp.responseText);
			}
		}
	};
	xmlhttp.send();
}

function custimiseDriection(result, paramList)
{
	 //console.log(result);
	var directionResult = JSON.parse(result);
	rendererOptions = {
		map : myMap,
		suppressMarkers : true,
		polylineOptions : {
			strokeColor : "red"
		}
	};
	var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
	directionsDisplay.setDirections(directionResult);    
}

function setBaseMap() {
	var mapOptions = {
		zoom : 10,
		center : new google.maps.LatLng(-33.8636979,  151.207455),
		mapTypeId : google.maps.MapTypeId.ROADMAP
	};
	myMap = new google.maps.Map(document.getElementById('map'), mapOptions);
	stepDisplay = new google.maps.InfoWindow();
}

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

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

Answer 1

Google Maps Javascript API DirectionsRenderer 不会呈现来自Directions API web service 的响应

来自the documentation：

DirectionsRenderer 类

呈现从 DirectionsService 获得的路线。

使用Google Maps Javascript API v3 DirectionsService 获取要渲染的路由。

proof of concept fiddle (with your route)

代码 sn-p：

// var directionsUrl = "https://maps.googleapis.com/maps/api/directions/json?origin=sydney,au&destination=perth,au&waypoints=via:-37.81223%2C144.96254%7C-34.92788%2C138.60008

var geocoder;
var myMap;
var stepDisplay;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  setBaseMap();
  var request = {
    origin: "sydney,au",
    destination: "perth,au",
    waypoints: [{
      location: new google.maps.LatLng(-37.81223, 144.96254),
      stopover: false
    }, {
      location: new google.maps.LatLng(-34.92788, 138.60008),
      stopover: false
    }],
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      custimiseDriection(result, {});
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function custimiseDriection(result, paramList) {
  //console.log(result);
  // var directionResult = JSON.parse(result);
  rendererOptions = {
    map: myMap,
    suppressMarkers: true,
    polylineOptions: {
      strokeColor: "red"
    }
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  directionsDisplay.setDirections(result);
}

function setBaseMap() {
  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.8636979, 151.207455),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  myMap = new google.maps.Map(document.getElementById('map'), mapOptions);
  stepDisplay = new google.maps.InfoWindow();
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

更新：
如果你想使用DirectionsRenderer 渲染结果，有一个相关的问题：Google Maps display route from json，这不是开箱即用的（我收到一个 javascript 错误：Uncaught TypeError: Cannot read property 'travelMode' of undefined，因为request 现在是预计可用，但可以更新以工作： proof of concept fiddle (with your route displayed via the DirectionsRenderer))。请注意，这没有记录在案，因此对于生产代码可能不安全，因为它可能随时中断。