我遇到了DirectionsService的问题。
我想显示一条到没有地图的地方的路线,所以,我“手工制作”了一些路线(JavaScript标记和多边形)。当我从一个方向请求路线到路线的交叉点(纬度和经度点)时,问题出现了,DirectionsService显示的路线并不完全在指示的点上结束。为了想象这一点,我准备了一个小提琴:
预期的终点是{-30.745418,-59.580419}(两条道路之间的交叉点),但谷歌将路线追溯到北方。尝试不同的坐标,迹线移动到南方或东方,但从未在我想要的位置。
如果我使用鼠标将标记“B”移动到坐标,则路径会正确跟踪,但我无法自动进行。无法弄清楚如何使路线到达确切点或通过JavaScript“拖动”标记。
修改:Google在新版Google Maps API中修复了此问题。
HTML:
<div id="lienzoMapa1" class="lienzoMapa" style="width:960px; height:600px;"> </div>
JavaScript的:
var infowindow;
var mapa1;
var marcadores1 = new Array();
var rutas1 = new Array();
var resultadosRutas1 = new Array();
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({'draggable': true});
var objetosMarcadores1 = new Array();
function agregarIcono(imagen, latitud, longitud, html, ponerAlFrente) {
//Agregamos un icono de ruta
var latLng = new google.maps.LatLng(latitud, longitud);
var marcador = new google.maps.Marker({
position: latLng,
map: mapa1,
icon: imagen
});
if (ponerAlFrente === true) {
marcador.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
}
objetosMarcadores1.push(marcador);
return marcador;
}
function inicializarMapa(identificador, marcadores, zoom, tipoMapa, habilitarInterfaz, rutas){
var latitudLongitud = new google.maps.LatLng(marcadores[0][0] , marcadores[0][1]);
var opcionesMapa = {
zoom: zoom,
center: latitudLongitud,
mapTypeId: tipoMapa,
disableDefaultUI: habilitarInterfaz
};
mapa1 = new google.maps.Map(document.getElementById("lienzoMapa" + identificador), opcionesMapa);
directionsDisplay.setMap(mapa1);
infowindow = new google.maps.InfoWindow();
for (contador=0; contador < marcadores.length; contador++){
var latitudLongitud = new google.maps.LatLng(marcadores[contador][0] , marcadores[contador][1]);
agregarMarcador(latitudLongitud, mapa1, marcadores[contador][2], marcadores[contador][3], marcadores[contador][4]);
}
for (contador=0; contador < rutas.length; contador++){
agregarRuta(rutas[contador][0], rutas[contador][1]);
}
}
function agregarMarcador(latitudLongitud, mapa, titulo, contenido, icono){
var opcionesMarcador = {
position: latitudLongitud,
map: mapa,
title: titulo
};
if(icono!=''){
opcionesMarcador.icon = icono;
}
var marcador = new google.maps.Marker(opcionesMarcador);
objetosMarcadores1.push(marcador);
if(contenido!=''){
google.maps.event.addListener(marcador, 'click', function() {
infowindow.setContent(contenido);
infowindow.open(mapa,marcador);
});
}
}
function agregarRuta(origen, destino) {
var request = {
origin: origen,
destination: destino,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
resultadosRutas1.push(response);
var elementoDistancia = jQuery('.distancia');
if (elementoDistancia.length > 0) {
elementoDistancia.text(response.routes[0].legs[0].distance.text);
}
var elementoTiempo = jQuery('.tiempo');
if (elementoTiempo.length > 0) {
elementoTiempo.text(response.routes[0].legs[0].duration.text);
}
}
});
}
jQuery(document).ready(function(){
marcadores1[0] = new Array(-30.745418, -59.580419, '', '', '');
rutas1[0] = new Array('Suipacha 929, rosario', '-30.745418,-59.580419');
inicializarMapa(1, marcadores1, 6, google.maps.MapTypeId.HYBRID, false, rutas1);
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/arco.png', -30.744722, -59.581353, '<p>Arco de Acceso</p>');
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/izquierda.png', -30.74024, -59.611314, '<p>Ruta de Acceso</p>');
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/izquierda.png', -30.73894, -59.623577, '<p>Ruta de Acceso</p>');
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/curva.png', -30.737456, -59.633469, '<p>Ruta de Acceso</p>');
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/dummy.png', -30.737628, -59.633958);
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/dummy.png', -30.737871, -59.634306);
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/dummy.png', -30.738106, -59.63468);
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/dummy.png', -30.738161, -59.635031);
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/izquierda.png', -30.738129, -59.635378, '<p>Ruta de Acceso</p>');
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/puente.png', -30.737838, -59.638017, '<p>Puente Rojo</p>');
var marcadorCabana = agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/dummy.png', -30.737718, -59.640431);
//Una vez que tenemos todos los iconitos, los unimos con polilíneas
var polyOptions = {
strokeColor: '#292b9c',
strokeOpacity: 0.8,
strokeWeight: 5
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(mapa1);
for (i = 0; i < objetosMarcadores1.length; i++) {
var marcador = objetosMarcadores1[i];
var path = poly.getPath();
path.push(marcador.getPosition());
}
//Agregamos por último la cabaña y la estación de servicio
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/cabana-verde.png', -30.738018, -59.640469, '<p>Cabañas Los Fardos</p>', true);
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/estacion.png', -30.737764, -59.641375, '<p>Estación de Servicio OIL</p>');
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/plaza.png', -30.740434, -59.644414, '<p>Plaza Principal</p>');
agregarIcono('http://www.cabanaslosfardos.com.ar/plantillas/losFardos/imagenes/comoLlegar/puerto.png', -30.734422, -59.640745, '<p>Puerto</p>');
});