2011-03-24 16 views
6

según google maps puedo planificar una ruta que cruce varios puntos de referencia. Se explica aquí: http: //code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routesgoogle maps que muestra una ruta

Ahora la API quiere que agregue los puntos de referencia de esta manera:

location: waypoints 

así puntos de referencia es un conjunto wich tengo que dedicar a la ubicación: parámetro pero por lo que he visto en la demo que se llenan la matriz de cadenas de los lugares. ¿Qué me preguntaba si era posible pasar la latitud y la longitud en lugar de las cuerdas?

actualización: esta es la parte donde trato de crear una ruta. he puesto el mismo valor en la ubicación a lo largo de todo el circuito, pero por ahora Identificación no funciona si uso ni los valores de las variables

function calcRoute() { 

    var waypts = []; 

    for (var i in owt.stores.spotStore.data.map) { 
     waypts.push({ 
      location: new google.maps.LatLng(12.3, -33.6), 
      stopover:true 
     }); 
     console.log(waypts); 
    } 
    var request = { 
     origin: new google.maps.LatLng(50.82788, 3.26499), 
     destination: new google.maps.LatLng(50.82788, 3.26499), 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 
} 
; 

Respuesta

10

De acuerdo con la API reference:

Un DirectionsWaypoint representa una ubicación entre el origen y el destino a través del cual se debe encaminar el viaje.

ubicación LatLng | string Waypoint ubicación. Puede ser una cadena de dirección o LatLng.Opcional

lo tanto la creación de un nuevo punto de referencia con un valor lat-tiempo debe ser lo más abajo

return { 
    location:new google.maps.LatLng(12.3, -33.6), 
    stopover:true 
}; 
+0

bien que he hecho esto, pero la situación sigue diciendo ZERO_RESULTS, he actualizado mi post para mostrar la función donde compilo las rutas, tal vez usted podría tener una mirada para ver si algo está mal? Esta es solo la última parte del código, ya que todo lo demás funciona correctamente excepto esta parte. – vincent

+0

Puse los valores '(12.3, -33.6)' solo para mostrar un ejemplo de cómo podrías crear un nuevo punto, como ha señalado Jonathan anteriormente, ¡esas coordenadas están en el medio del Océano Atlántico! Esa es probablemente la razón por la que no obtienes resultados. Además, en su muestra de código, su origen y destino son los mismos, eso es por diseño, ¿no? –

2

La forma más puntos pueden ser una cadena o una LatLng.

http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Directions

En particular:

waypoints [] (opcional) especifica una matriz de DirectionsWaypoints. Los puntos de referencia alteran una ruta al direccionarla a través de la (s) ubicación (es) especificada (s). A waypoint se especifica como un objeto literal con campos que se muestran a continuación:

location specifies the location of the waypoint, either as a LatLng or as 

una cadena que se codificarán geográficamente. escala es un booleano que indica que el punto intermedio es una parada en la ruta, que tiene el efecto de dividir la ruta en dos rutas.

(Para más información sobre puntos de interés, consulte Uso de hitos en las rutas a continuación.)

EDITAR

Sus puntos de paso no son válidas para el enrutamiento, es decir, que están en el agua - tratar de centrado un mapa en (12, -33.6).

Aquí hay una muestra que utiliza puntos de paso (no el código más bonito, pero es un ejemplo;)).

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript"> 

     var myRouter = { 
      map_: null, 
      directionsHelper_: null, 

      stores: [ 
        {name: "store1", location: new google.maps.LatLng(50.82788, 3.76499)}, 
        {name: "store2", location: new google.maps.LatLng(51.02788, 3.9)} 
       ], 

      calcRoute: function() { 

       var waypts = []; 

       for (var i in this.stores) { 
        waypts.push({ 
         location: this.stores[i].location, 
         stopover:true 
        }); 
       } 
       var request = { 
        origin: new google.maps.LatLng(50.82788, 3.26499), 
        destination: "Antwerp", 
        waypoints: waypts, 
        optimizeWaypoints: true, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING 
       }; 

       var _SELF = this; 
       this.directionsHelper_.route(request, function(response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         _SELF.directionsDisplay_.setDirections(response); 
         return; 
        } 
        console.log('Directions Status: ' + status); 
       }); 
      }, 

      init: function(mapid) { 

       this.directionsHelper_ = new google.maps.DirectionsService(); 
       this.directionsDisplay_ = new google.maps.DirectionsRenderer(); 

       var center = new google.maps.LatLng(50.82788, 3.26499); 
       var myOptions = { 
        zoom:7, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: center 
       } 
       this.map_ = new google.maps.Map(document.getElementById(mapid), myOptions); 
       this.directionsDisplay_.setMap(this.map_); 

       this.calcRoute(); 
      } 
     }; 

     $(document).ready(function() { 
      myRouter.init('map'); 
     }); 

    </script> 
    <style type="text/css"> 
     #map { 
      height: 500px; 
      width: 600px; 
      border: 1px solid #000; 
     } 
    </style> 
</head> 
<body> 
    <div id="map"></div> 
</body> 
</html> 
2

De acuerdo con la documentación de Google el waypoint puede ser una cadena o un objeto LatLng. http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint

aquí es un ejemplo usando LatLng

<!DOCTYPE html> 
<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>Google Maps JavaScript API v3 Example: Directions Waypoints</title> 
     <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 
     </script> 
     <script type="text/javascript"> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(-40.321, 175.54); 
     var myOptions = { 
      zoom: 6, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: chicago 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     directionsDisplay.setMap(map); 
     calcRoute(); 
    } 

    function calcRoute() { 

     var waypts = []; 


stop = new google.maps.LatLng(-39.419, 175.57) 
     waypts.push({ 
      location:stop, 
      stopover:true}); 


     start = new google.maps.LatLng(-40.321, 175.54); 
     end = new google.maps.LatLng(-38.942, 175.76); 
     var request = { 
      origin: start, 
      destination: end, 
      waypoints: waypts, 
      optimizeWaypoints: true, 
      travelMode: google.maps.DirectionsTravelMode.WALKING 
     }; 
     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
       var route = response.routes[0]; 

      } 
     }); 
    } 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="width:70%;height:80%;"> 
     </div> 
     <br /> 
     <div> 

     </div> 
    </body> 
</html> 
+0

El código anterior no funciona. sin errores, sin mapa – htm11h