web-dev-qa-db-fra.com

Changer les marqueurs individuels dans les directions google maps api V3

Je cherche à changer les icônes de marqueur lors de l'utilisation de DirectionsRender dans une carte Google. J'ai compris ici comment changer les deux marqueurs sur la même icône, mais je recherche des icônes personnalisées sur les points de début et de fin. Des idées?

Modifier: je cherche comment attribuer des icônes distinctes aux marqueurs de début et de fin. Je sais comment le changer pour les deux, mais avoir différentes icônes de marqueur s'avère difficile.

javascriptgoogle-mapsgoogle-maps-api-3
33
Corey Hart

Pour ceux qui ont besoin d'un exemple comme moi, voici un exemple de base:

 // 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 réponse d'une demande d'itinéraire renvoie une étape selon le nombre d'arrêts sur votre itinéraire. Je ne fais qu'un itinéraire de A à B, alors prenez simplement la première étape et obtenez la position de l'endroit où les marqueurs doivent aller et créez des marqueurs pour ces endroits.

66
Corey Hart

Faites comme ils disent sur la page à laquelle vous avez lié:

  • Définissez l'option suppressMarkers sur true pour empêcher les marqueurs de début et de fin par défaut de s'afficher
  • Créez le images pour les deux nouveaux marqueurs
  • Créez les marqueurs avec la position définie sur les positions de début et de fin, et l'icône définie sur celles que vous avez créées
12
aniri