2011-01-27 22 views
27

Estoy buscando cambiar los iconos de marcador cuando utilice el DirectionsRender dentro de un mapa de Google. He descubierto desde here cómo cambiar ambos marcadores al mismo icono, pero estoy buscando iconos personalizados en los puntos de inicio y fin. ¿Algunas ideas?Cambiar marcadores individuales en direcciones de google maps api V3

Editar: Estoy buscando cómo asignar iconos separados a los marcadores de inicio y fin. Sé cómo cambiarlo para ambos, pero tener diferentes iconos de marcador está resultando difícil.

Respuesta

61

para aquellos tha t necesidad de un ejemplo como lo hice, he aquí una básica uno:

// Map and directions objects 
var map = new google.maps.Map(element, options); 
var service = new google.maps.DirectionsService(); 
var directions = new google.maps.DirectionsRenderer({suppressMarkers: true}); 

// Start/Finish icons 
var icons = { 
    start: new google.maps.MarkerImage(
    // URL 
    'start.png', 
    // (width,height) 
    new google.maps.Size(44, 32), 
    // The origin point (x,y) 
    new google.maps.Point(0, 0), 
    // The anchor point (x,y) 
    new google.maps.Point(22, 32) 
), 
    end: new google.maps.MarkerImage(
    // URL 
    'end.png', 
    // (width,height) 
    new google.maps.Size(44, 32), 
    // The origin point (x,y) 
    new google.maps.Point(0, 0), 
    // The anchor point (x,y) 
    new google.maps.Point(22, 32) 
) 
}; 

service.route({ origin: origin, destination: destination }, function(response, status) { 
if (status == google.maps.DirectionsStatus.OK) { 
    display.setDirections(response); 
    var leg = response.routes[ 0 ].legs[ 0 ]; 
    makeMarker(leg.start_location, icons.start, "title"); 
    makeMarker(leg.end_location, icons.end, 'title'); 
} 
}); 
function makeMarker(position, icon, title) { 
new google.maps.Marker({ 
    position: position, 
    map: map, 
    icon: icon, 
    title: title 
}); 
} 

La respuesta de una petición de ruta devuelve una pierna (s) en función del número de paradas en su ruta. Solo estoy haciendo una ruta de A a B, así que solo tome la primera etapa, y obtenga la posición de a dónde deben ir los marcadores, y cree marcadores para esos puntos.

+9

¿Qué hay de cambiar los marcadores dentro de las direcciones? – Jason

+0

Sí, buena pregunta! – keatch

+0

Agregué functionallity para borrar todos los marcadores antes de calcular las direcciones por segunda vez. Consulte también https://developers.google.com/maps/documentation/javascript/examples/marker-remove – lmeurs

10

hacen lo que dicen en esa página se ha vinculado a:

  • Establecer la opción de suppressMarkers true para evitar que los marcadores de inicio por defecto y fin de mostrar
  • Cree el images para los dos nuevos marcadores
  • Crear el markers con la posición ajustada a las posiciones de inicio y fin, y el conjunto de iconos a los que creó
+0

Pero, ¿cómo los asignas al objeto Renderer? Solo toma un objeto MarkerOptions, no dos. –

+3

no los asigne. solo obtenga las coordenadas para ellos y cree dos nuevos marcadores. – aniri

Cuestiones relacionadas