在Google地图上显示Directions webservice结果时出错 [英] error in displaying Directions webservice result on to the google map

问题描述

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

未捕获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（）;}函数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>

解决方案

Google Maps Javascript API DirectionsRenderer 不会呈现来自 Directions API web服务 文档：

DirectionsRenderer class

呈现从DirectionsService获取的路线。

使用 Google Maps JavaScript API v3 DirectionsService 获取要呈现的路线。

概念验证小提琴（与您的路线）

代码段：

  // 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.60008var 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），中途停留：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）;函数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）;}函数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％;宽度：100％; margin：0px; < script src =https：//

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

Uncaught InvalidValueError: not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast

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:

DirectionsRenderer class

Renders directions obtained from the DirectionsService.

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结果时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！