1. casa
  2. Domanda e risposta
  3. Come aggiungere un suggerimento personalizzato per l'indicatore di Google Maps?

Come aggiungere un suggerimento personalizzato per l'indicatore di Google Maps?

2012-03-06 15 views

risposta

3

È possibile ascoltare l'evento mouseover sull'indicatore e attivare uno infoWindow da visualizzare con quell'evento.

Una volta aperta la finestra, è possibile inserire immagini e testo in un modo che sia ben supportato dall'api.

fonte

2012-03-06 10:10:33 Oliver

+0

sì, ma infowindow è difficile da personalizzare. Ha un design predefinito. InfoBox è offerto per me. –

4

Ecco cosa ho fatto su un progetto se si desidera una soluzione DIY.

  1. Creare un div nascosto sulla pagina con posizione css impostata su assoluto. Assicurati che il tuo DIV appaia sopra il contenitore della mappa (z-index).
  2. Associare gli eventi mouseover e mouseout ai marker per attivare una funzione showDiv/hideDiv.
  3. Quando il mouse alza un marker, posiziona il mouse x, y, imposta i valori di DIV in alto e sinistro di conseguenza e imposta il suo css in modo da visualizzare: block;
  4. Quando il mouse è fuori, nascondere DIV nuovamente.

In questo modo puoi davvero controllare come appare il tuo "infowindow" e cosa conterrà. In bocca al lupo.

fonte

2012-03-06 10:27:14 MrUpsidown

+0

Se gestisci l'evento mouseover del marker utilizzando google.maps.event.addListener, tutto l'oggetto evento contiene è lat e long, quindi non ottieni le posizioni x, y del mouse. Ciò rende impossibile l'implementazione di questo approccio. – Justin

+0

Non ho detto che si ottiene la posizione del mouse dal listener di marker. Scaricalo dal DOM come faresti in qualsiasi altro script. – MrUpsidown

0

Oleg, perché sei legato alla API di google maps. È possibile inserire un suggerimento personalizzato nel DOM.

Allega listener di eventi per gli utenti di mouseover, mousemove e mouseout sulla mappa (o parti specifiche della mappa). Ognuno di questi ascoltatori ti dà anche un argomento dandoti le coordinate del mouse.

utilizzare uno stile fisso/assoluto css della descrizione per posizionarlo

al passaggio del mouse, iniettare la descrizione comando nella posizione del cursore nel DOM su mousemove, aggiornare la posizione (sinistra e superiore) su mouseout, rimuovi il suggerimento dal DOM.

Ho recentemente creato questo per i poligoni di google maps. Puoi riutilizzare il mio approccio per qualsiasi altra parte della tua mappa poiché quasi tutte le funzioni della mappa di google supportano eventi.

link: https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458

fonte

2017-05-25 16:17:17

Problemi correlati

 Problemi correlati