2009-11-17 35 views
22

Estoy construyendo un mapa usando la API de Google Api 3 porque es mucho más rápido. Esencialmente, es un mapa de un área con aproximadamente 30 ciudades con polígonos sobre las regiones. Cuando un usuario se desplaza sobre una ciudad, quiero que fillColor se vuelva más claro y luego vuelva a su estado normal con mouseout. cuando un usuario hace clic, los redirige a otra página.google maps v3 API mouseover con polígonos?

El evento click funciona bien. Sin embargo, al revisar la documentación de la API v3, parece que Google ha implementado clic, doble clic, mousemove, mousedown y mouseup como desencadenantes de evento, pero no se desplaza, o mouseover o mouseout.

¿De verdad? Geez. Pensaba que sería una prioridad mayor que ir hacia abajo y hacia arriba.

De todos modos, ¿alguien más se ha encontrado con esto? ¿Me equivoco? ¿O hay una solución alternativa?

Gracias de antemano por su ayuda, Stephanie

Respuesta

38

las siguientes obras:

google.maps.event.addListener(polygon,"mouseover",function(){ 
this.setOptions({fillColor: "#00FF00"}); 
}); 

google.maps.event.addListener(polygon,"mouseout",function(){ 
this.setOptions({fillColor: "#FF0000"}); 
}); 
+0

Como usted dice, estos ya están implementados en V3. – Nordes

+0

Solicité en un Grupos de Google y un administrador me contestó que habían tenido varias solicitudes para esto y luego lo implementaron. ¡Gracias! –

0

encima del ratón y mouseout ahora se implementan en V3 Polyline.

2

En Google Maps API V3, tengo un rollover para un polígono con el siguiente código. No me gusta que tenga que desarmar y reiniciar el mapa cada vuelco, pero, en este punto en el tiempo, así es como logré un mouseover.

Estoy interesado en cualquier comentario sobre cómo mejorar este código.

var polyShape  = new google.maps.Polygon({paths:polyData,strokeColor:"#aa0",strokeOpacity:0.5,strokeWeight:1,fillColor:"#cc0",fillOpacity: 0.25}); 
var polyShapeOver = new google.maps.Polygon({paths:polyData,strokeColor:"#cc0",strokeOpacity:0.5,strokeWeight:1,fillColor:"#ff0",fillOpacity: 0.25}); 

polyShape.setMap(map); 

google.maps.event.addListener(polyShape,"mouseover",function(){ 
    this.setMap(null); 
    polyShapeOver.setMap(map); 
}); 

google.maps.event.addListener(polyShapeOver,"mouseout",function(){ 
    this.setMap(null); 
    polyShape.setMap(map); 
}); 
Cuestiones relacionadas