Uncaught InvalidValueError:未知的属性来源
Uncaught InvalidValueError: unknown property origin
代码使用google maps api
并绘制选定点之间的路由。但点击"Calculate distances
"按钮无法计算这两点之间的距离。
返回的错误是:
代码:Uncaught InvalidValueError: unknown property origin main.js:12 .
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Trying Hard Now!</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<style>
html, body{
height: 100%;
margin: 0px;
padding: 0px
}
#map_canvas {
height: 100%;
width: 100%;
}
#panel {
position: absolute;
height : 30%;
width: 20%
top: 30px;
left: 15%;
margin-left: -180px;
z-index: 5;
background-color: rgba(255,255,255,0);
padding: 5px;
}
#outputDiv {
font-size: 11px;
}
</style>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var infowindow;
var map;
var origin = null;
var destination = null;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myLatlng = new google.maps.LatLng(19.1264,72.8790);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
downloadUrl("xmltaxi.php", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 6; i < 16; i=i+8) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
//var marker = createMarker(latlng);
if (i == 6)
origin = latlng;
else
destination = latlng;
}
});
//calcRoute();
}
/*function createMarker(latlng) {
var marker = new google.maps.Marker({position: latlng, map: map});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
//infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}*/
//calcRoute();
function calcRoute() {
var selectedMode = document.getElementById('mode').value;
//var start = document.getElementById('start').value;
//var end = document.getElementById('end').value;
var request = {
origin:origin,
destination:destination,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function calculateDistances() {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
//var origin = response.originAddresses;
//var destination = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
// deleteOverlays();
//for (var i = 0; i < origin.length; i++) {
var results = response.rows[0].elements;
//addMarker(origins[i], false);
//for (var j = 0; j < results.length; j++) {
//addMarker(destinations[j], true);
outputDiv.innerHTML += results[0].distance.text + ' in '
+ results[0].duration.text + '<br>';
//}
//}
}
}
//}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<b>Search: </b>
<select onchange="calcRoute();">
<option></option>
<option id="mode" value="DRIVING">Route</option>
</select>
<div id="inputs">
<p><button type="button" onclick="calculateDistances();">Calculate
distances</button></p>
</div>
<div id="outputDiv"></div>
</div>
<div id="map_canvas"></div>
</body>
</html>
这可能是一个非常小的错误,所以请帮助我。
DistanceMatrixRequest没有属性origin
,应该是origins
。同样,destination
应该是destinations
。并且它希望以数组的形式接收这些对象,而不是单个的LatLng对象。
service.getDistanceMatrix(
{
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
应该service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
相关文章:
- JavaScript 这返回未知属性
- AngularJS 未知类型错误:无法读取 null 的属性“1”
- 未知的目标实体属性错误
- 如何使属性动态化(在执行代码之前未知)
- 量角器未知错误,从 DOM 中删除属性
- 为什么
- Angular js:->访问解析属性时,angular引发未知提供程序错误
- 属性名称未知的Mustache模板
- 如何在属性名称未知的情况下解析JSON数据
- 在 JavaScript 中的对象中设置具有未知深度的属性值
- 传递未知数量的对象属性
- 如何更改src属性的一部分未知
- 将变量传递给React组件会给出“未知属性error”
- Uncaught InvalidValueError:未知的属性来源
- 访问对象数组中具有未知属性名称的生成属性
- 安全-可以创建具有未知属性的对象
- JS模板和未知属性
- 读取未知属性的名称
- 未知属性@Validation.For("orderName")
- 访问javascript中未知对象的属性