2010-11-29 38 views
5

Tengo polígonos para diversas regiones y estados en mi aplicación. Los marcadores implementan información sobre herramientas tomando el atributo de título. Al mouseover y mouseout sobre un polígono se pueden activar eventos. ¿Cómo creo una información sobre herramientas que se parece a la información sobre herramientas que se implementa para un marcador?Información sobre herramientas sobre un polígono en Google Maps

Editar-1: Agregar el código utilizado para crear el polígono y adjuntar los controladores para mostrar/ocultar información sobre herramientas.

function addPolygon(points) { 
    var polygon = new google.maps.Polygon({ 
     paths: points, 
     strokeColor: " #FFFFFF", 
     strokeOpacity: 0.15, 
     strokeWeight: 1.5, 
     fillColor: "#99ff66", 
     fillOpacity: 0.14 
    }); 
    var tooltip = document.createElement('div'); 
    tooltip.innerHTML = "Alok"; 

    google.maps.event.addListener(polygon,'mouseover',function(){ 
     tooltip.style.visibility = 'visible'; 
    }); 
    google.maps.event.addListener(polygon,'mouseout',function(){ 
     tooltip.style.visibility = 'hidden'; 
    }); 
    polygon.setMap(map); 
} 
+0

duplicado posible de [Google maps v3 polilínea sobre herramientas] (https://stackoverflow.com/questions/5112867/google-maps-v3-polyline-tooltip) –

Respuesta

1

creo que tendrá que hacerlo yourself.In una página que he implementado Os adjunto un desplazamiento del ratón a la página para que pueda grabar el position.Then ratón cuando un evento se produce al pasar el ratón polígono i mostrar una div encargo cerca de la posición del ratón

Polygon tooltip

creo que sirve

+0

Probé algo como esto. Mi enfoque es el siguiente: 1. Tengo los eventos mouseover y mouseout. 2. Creé un div y lo mostré en el evento de mouserover y lo oculté en el evento mouseout. Esto no funcionó para mí. –

+0

Tal vez si publica su código, podamos entender de dónde vino el error. –

+0

Lo estoy colocando en una edición de la pregunta. –

0

Usted podría intentar el siguiente

//Add a listener for the click event 
google.maps.event.addListener('click', showArrays); 
infoWindow = new google.maps.InfoWindow; 

entonces cuando el evento click ocurre llamar a la siguiente función

function showArrays(event) { 

    var contentString = 'Content here'; 

    // Replace the info window's content and position. 
    infoWindow.setContent(contentString); 
    infoWindow.setPosition(event.latLng); 

    infoWindow.open(map); 
} 
1

En realidad hay un buen truco para evitar esta limitación (extraño) en Google Maps. Al mover el mouse sobre un elemento de datos, puede agregar una información sobre herramientas al <div> del mapa. Se agregará en la ubicación donde actualmente se encuentra el puntero del mouse, justo sobre el elemento.

map.data.addListener('mouseover', mouseOverDataItem); 
map.data.addListener('mouseout', mouseOutOfDataItem)); 

...

function mouseOverDataItem(mouseEvent) { 
    const titleText = mouseEvent.feature.getProperty('propContainingTooltipText'); 

    if (titleText) { 
    map.getDiv().setAttribute('title', titleText); 
    } 
} 

function mouseOutOfDataItem(mouseEvent) { 
    map.getDiv().removeAttribute('title'); 
} 
Cuestiones relacionadas