2011-01-27 24 views
27

Sto cercando di cambiare le icone dei marker quando si utilizza DirectionsRender all'interno di una mappa di google. Ho capito da here come modificare entrambi i marcatori sulla stessa icona, ma sto cercando icone personalizzate sia sul punto iniziale che sul punto finale. Qualche idea?Modifica singoli marker in google maps indicazioni api V3

Modifica: Sto cercando come assegnare icone separate ai marcatori di inizio e fine. So come cambiarlo per entrambi, ma avere diverse icone dei marker si sta dimostrando difficile.

risposta

61

per coloro tha t bisogno di un esempio come ho fatto io, ecco una base 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 risposta da una richiesta percorso restituisce una gamba (s) a seconda del numero di fermate lungo il percorso. Sto solo facendo un percorso da A a B, quindi prendi la prima tappa e ottieni la posizione in cui i marcatori devono andare e crea dei segnalini per quei punti.

+9

Che ne dici di cambiare i marker all'interno delle direzioni stesse? – Jason

+0

Sì, bella domanda! – keatch

+0

Ho aggiunto funzionalità per cancellare tutti i marcatori prima di calcolare le direzioni per una seconda volta. Vedi anche https://developers.google.com/maps/documentation/javascript/examples/marker-remove – lmeurs

10

Do come si dice in quella pagina si è collegato a:

  • Impostare l'opzione suppressMarkers su true per evitare che i marcatori di inizio di default e fine di mostrare
  • Creare il images per i due nuovi marcatori
  • Creare il markers con la posizione impostata per le posizioni di inizio e fine, e il set di icone a quelle che ha creato
+0

Ma come li si assegna all'oggetto Renderer? Richiede solo un oggetto MarkerOptions, non due. –

+3

non li si assegna. prendi le coordinate per loro e crea due nuovi segnalini. – aniri