显示方向webservice结果到谷歌地图的错误

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)

代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;