很抱歉,如果之前已经问过这个问题。我想加载带有 2 个标记的 map :起点和目的地。当建立 2 个标记时,我绘制了要遵循的路径(模式:驾驶)。
当我选择 2 个标记时,出现此错误:“Uncaught InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object” 请帮我解决这个问题!
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
var cont=0;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
google.maps.event.addListener(map, "click", daclick);
function daclick(evento){
//var cont=0;
if(cont==0){
var latitudOrigen = evento.latLng.lat();
var longitudOrigen = evento.latLng.lng();
var myLatlngOrigen = new google.maps.LatLng(latitudOrigen,longitudOrigen);
var markerOrigen = new google.maps.Marker({
position: myLatlngOrigen,
map: map,
title: "Origen"
});
cont=1;
}else{
var latitudDestino = evento.latLng.lat();
var longitudDestino = evento.latLng.lng();
var myLatlngDestino= new google.maps.LatLng(latitudDestino,longitudDestino);
var markerDestino = new google.maps.Marker({
position: myLatlngDestino,
map: map,
title: "Destino"
});
cont=0;
}
var request = {
origin:latitudOrigen,
destination:myLatlngDestino,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
最佳答案
我收到此 javascript 错误 your code :未捕获的InvalidValueError:在属性来源中:不是字符串;而不是 LatLng 或 LatLngLiteral:不是对象
。出于多种原因:
var request = {
origin: latitudOrigen,
destination: myLatlngDestino,
travelMode: google.maps.TravelMode.DRIVING
};
- latitudOrigen 不是 google.maps.LatLng 对象(它是一个数字,即原点的纬度)。
- 第二次点击时 myLatlngOrigen 超出范围
最简单的解决方法是使标记全局化,然后在运行路线服务时获取标记的位置:
var request = {
origin: markerOrigen.getPosition(),
destination: markerDestino.getPosition(),
travelMode: google.maps.TravelMode.DRIVING
};
您还需要将 DirectionsService 的调用移至点击事件处理函数的 else 内,因为只有在您同时拥有起点和终点后,它才会起作用。
} else { var myLatlngDestino = evento.latLng; markerDestino = new google.maps.Marker({ position: myLatlngDestino, map: map, title: "Destino" }); var request = { origin: markerOrigen.getPosition(), destination: markerDestino.getPosition(), travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); cont = 0; }
然后我得到:未捕获的ReferenceError:directionsDisplay未定义
,因为您没有初始化directionsDisplay对象。
一旦我定义它就可以工作。
代码片段:
var map;
var cont = 0;
var directionsService = new google.maps.DirectionsService();
var markerOrigen = null;
var markerDestino = null;
var directionsDisplay = new google.maps.DirectionsRenderer();
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
google.maps.event.addListener(map, "click", daclick);
function daclick(evento) {
//var cont=0;
if (cont == 0) {
var myLatlngOrigen = evento.latLng;
markerOrigen = new google.maps.Marker({
position: myLatlngOrigen,
map: map,
title: "Origen"
});
cont = 1;
} else {
var myLatlngDestino = evento.latLng;
markerDestino = new google.maps.Marker({
position: myLatlngDestino,
map: map,
title: "Destino"
});
var request = {
origin: markerOrigen.getPosition(),
destination: markerDestino.getPosition(),
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
cont = 0;
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
关于javascript - map 问题 : draw route with 2 coordinates,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24622737/