Google Maps API V3 DirectionsService不是确切的终点

时间:2011-11-15 02:48:56

标签: javascript api maps

我遇到了DirectionsService的问题。

我想显示一条到没有地图的地方的路线,所以,我“手工制作”了一些路线(JavaScript标记和多边形)。当我从一个方向请求路线到路线的交叉点(纬度和经度点)时,问题出现了,DirectionsService显示的路线并不完全在指示的点上结束。为了想象这一点,我准备了一个小提琴:

Personalized route

预期的终点是{-30.745418,-59.580419}(两条道路之间的交叉点),但谷歌将路线追溯到北方。尝试不同的坐标,迹线移动到南方或东方,但从未在我想要的位置。

如果我使用鼠标将标记“B”移动到坐标,则路径会正确跟踪,但我无法自动进行。无法弄清楚如何使路线到达确切点或通过JavaScript“拖动”标记。

修改:Google在新版Google Maps API中修复了此问题。

HTML:

<div id="lienzoMapa1" class="lienzoMapa" style="width:960px; height:600px;">&nbsp;</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>');
});

0 个答案:

没有答案