1. Inicio
  2. Pregunta y respuesta
  3. ¿Cómo agregar información sobre herramientas personalizada para el marcador de mapa de google?

¿Cómo agregar información sobre herramientas personalizada para el marcador de mapa de google?

2012-03-06 7 views

Respuesta

3

Puede escuchar el evento mouseover en el marcador y activar infoWindow para que aparezca con ese evento.

Una vez que tenga la ventana de información, puede poner imágenes y texto en ella de una manera que sea compatible con la API.

Fuente

2012-03-06 10:10:33 Oliver

+0

sí, pero infoWindow es difícil de personalizar. Tiene un diseño predefinido. InfoBox es ofrecido por mí. –

4

Esto es lo que hice en un proyecto si desea una solución de bricolaje.

  1. Cree un div oculto en su página con la posición css establecida en absolute. Asegúrese de que su DIV aparezca en la parte superior del contenedor del mapa (índice Z).
  2. Enlace los eventos mouseover y mouseout a sus marcadores para activar una función showDiv/hideDiv.
  3. Cuando el mouse sitúa un marcador, obtiene la posición x, y del mouse, establece los valores de DIV superior e izquierdo css en consecuencia y configura su css para visualizar: bloque;
  4. Cuando el mouse esté fuera, oculte el DIV nuevamente.

De esta manera usted realmente puede controlar cómo aparece su "infowindow" y lo que contendrá. Buena suerte.

Fuente

2012-03-06 10:27:14 MrUpsidown

+0

Si maneja el evento mouseover del marcador usando google.maps.event.addListener, todo el objeto de evento contiene lat y long, por lo que no obtiene las posiciones x, y del mouse. Eso hace que este enfoque sea imposible de implementar. – Justin

+0

No dije que obtuviera la posición del mouse del oyente marcador. Obtenlo del DOM como lo harías en cualquier otro script. – MrUpsidown

0

Oleg, ¿por qué estás obligado a la API de Google Maps? Puede inyectar una información sobre herramientas personalizada en el DOM.

Adjunte oyentes de eventos para mouseover, mousemove y mouseout listeners en el mapa (o partes específicas del mapa). Cada uno de esos oyentes también te da un argumento para darte las coordenadas del mouse.

utilizar un estilo fija/absoluta en css de la información de herramientas para posicionar que

en mouseover, inyectar la información de herramienta en la posición de cursor en el DOM en mousemove, actualizar la posición (izquierda y arriba) en mouseout, elimine la información sobre herramientas del DOM.

Hace poco construí esto para los polígonos de google maps. Puede reutilizar mi enfoque para cualquier otra parte de su mapa, ya que casi todas las funciones del mapa de Google admiten eventos.

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

Fuente

2017-05-25 16:17:17

Cuestiones relacionadas

 Cuestiones relacionadas