在Google地图上显示Directions webservice结果时出错

问题描述

我正在使用web服务定向服务API在Google地图上显示路线。
无法成功执行webservices Directions API文档中提供的示例。此工作流打破了以下不明确的错误：
$ b

也许我需要另一双眼睛来研究这个问题。你能否帮助解决这个问题。这里是我尝试执行的代码

I am using webservices Direction Service API to display the route on google map.And not able to succefully execute the examples provided in the webservices Directions API documentation. This workflow is breaking with below ambiguous error

May be I need another pair of eyes to look into this issue. Could you please help in resolving this issue. Here is the code I am trying execute

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>

解决方案

The Google Maps Javascript API DirectionsRenderer doesn't render the response from Directions API web service

From the documentation:

Use the Google Maps Javascript API v3 DirectionsService to get the route to render.

proof of concept fiddle (with your route)

code snippet:

// 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"></script>
<div id="map"></div>

这篇关于在Google地图上显示Directions webservice结果时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！