Cambiar los marcadores individuales en las direcciones de google maps api V3

Estoy mirando para cambiar los iconos de marcadores cuando se utiliza el DirectionsRender en un mapa de google. He descubierto a partir de aquí cómo cambiar tanto los marcadores para el mismo icono, pero estoy buscando iconos personalizados tanto en los puntos de inicio y final. Alguna idea?

Edit: estoy buscando la manera de asignar iconos separados para los marcadores de inicio y fin. Sé cómo cambiarlo para tanto, pero que tienen diferentes iconos de marcadores está resultando difícil.

InformationsquelleAutor Corey Hart | 2011-01-27

2 Kommentare

  1. 66

    Para aquellos que necesitan un ejemplo como yo lo hice, he aquí una básica:

     //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 ruta devuelve la solicitud de una pierna(s) en función del número de paradas en la ruta. Sólo estoy haciendo una a a B de la ruta, así que tome la primera a la pierna, y obtener la posición de donde los marcadores necesidad de ir, y crear marcadores para esos lugares.

    • Lo que sobre de cambiar los marcadores dentro de las instrucciones a sí mismos?
    • Sí, buena pregunta!
    • He añadido la funcionalidad para borrar todos los marcadores antes de calcular las direcciones para el 2º tiempo. Véase también developers.google.com/maps/documentation/javascript/examples/…
    • ¿cómo puedo ocultar el marcador de viejo ? causa de los nuevos marcadores es succssefuly añadido, pero el a y B marcador showd también :((
    • Mira la directions variable. {suppressMarkers: true} apaga los marcadores por defecto.
    • El cambio de los marcadores en las instrucciones del panel fue en realidad más fácil de lo esperado (especialmente con jQuery). La imagen tiene la clase adp-marker, por lo que sólo puede establecer que el atributo src del elemento a la misma url como su marcador icono de la misma. Si quieres personalizar las ventanas de información, el uso de suppresInfoWindows: true. Buscar adp-placemark elementos y cambiar el evento click para su padre para abrir su propia ventana de información.
    • Se puede hacer un JS Violín para esta aplicación en realidad he probado este código, pero no pude agregar etiquetas para el marcador
    • ¿Por qué no pasar mapa para makeMarker?
    • Los marcadores no están alineando perfectamente con los extremos de la polilínea como los marcadores por defecto, es mejor a no suprimir los marcadores por defecto y en lugar de cambiar el markerOptions en las Direcciones Representador de opciones?
    • He utilizado el código de arriba, pero en mi caso sólo mostrar polilínea no de inicio y de fin icono no se mostrará.en la anterior línea de código :la pantalla.setDirections( respuesta ); ¿por qué utilizar la pantalla var aquí?

  2. 12

    Hacer como dicen en la página que enlaza a:

    • Conjunto de la suppressMarkers opción a true para evitar el default marcadores de inicio y fin de mostrar
    • Crear el imágenes para los dos nuevos marcadores
    • Crear el marcadores con la posición a la posición inicial y final, y el conjunto de iconos a los que se crean
    • Pero, ¿cómo se les asigne para el renderizado de objetos? Sólo se necesita una MarkerOptions objeto, no dos.
    • no se les asigne. acaba de obtener las coordenadas para ellos y crear dos nuevos marcadores.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea