我正在使用 webservices Direction Service API 在谷歌地图上显示路线。 并且无法成功执行 webservices Directions API 文档中提供的示例。此工作流因以下不明确的错误而中断
Uncaught InvalidValueError: not a LatLngBounds or LatLngBoundsLiteral: unknown property northeast
可能我需要另一双眼睛来研究这个问题。你能帮忙解决这个问题吗?这是我正在尝试执行的代码
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>
最佳答案
Google Maps Javascript API DirectionsRenderer不呈现来自 Directions API web service 的响应
来自 the documentation :
DirectionsRenderer class
Renders directions obtained from the DirectionsService.
使用 Google Maps Javascript API v3 DirectionsService获取渲染路径。
proof of concept fiddle (with your route)
代码片段:
// 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
as the request
is now expected to可用,但可以更新以工作:
proof of concept fiddle (with your route displayed via the DirectionsRenderer) ).请注意,这没有记录在案,因此对于生产代码来说可能不安全,因为它可能随时中断。
关于javascript - 在谷歌地图上显示路线网络服务结果时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35921878/