¿Cómo cambio el cursor del mouse cuando me meto en un área en particular en Google Map V3?

StackOverflow https://stackoverflow.com/questions/2557679

Pregunta

Usando el API V3 de Google Maps: ¿Cómo cambio el cursor del mouse cuando me muevo en un área en particular?

¿Fue útil?

Solución

Sí, esto es posible estableciendo draggableCursor en MapOptions, como en el siguiente ejemplo:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps v3 Change Cursor Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById("map"), { 
                                       mapTypeId: google.maps.MapTypeId.ROADMAP, 
                                       zoom: 8,
                                       center: new google.maps.LatLng(-34.3, 150.6) 
                                    });

      var ne = new google.maps.LatLng(-34.00, 150.00);
      var nw = new google.maps.LatLng(-34.00, 150.50);                              
      var sw = new google.maps.LatLng(-35.00, 150.50);
      var se = new google.maps.LatLng(-35.00, 150.00);

      var boundingBox = new google.maps.Polyline({
         path: [ne, nw, sw, se, ne],
         strokeColor: '#FF0000'
      });

      boundingBox.setMap(map);

      google.maps.event.addListener(map, 'mousemove', function(event) {
         if ((event.latLng.lat() > se.lat()) && (event.latLng.lat() < ne.lat()) &&
             (event.latLng.lng() > ne.lng()) && (event.latLng.lng() < sw.lng())) {
            map.setOptions({ draggableCursor: 'crosshair' });
         }
         else {
            map.setOptions({ draggableCursor: 'url(http://maps.google.com/mapfiles/openhand.cur), move' });
         }
      });
   </script> 
</body> 
</html>

Si ejecuta el ejemplo anterior, el cursor cambiaría a una cruz una vez que el mouse se mueva dentro del rectángulo rojo.

Google Maps Change Cursor

Otros consejos

Otras respuestas aconsejando poner a los oyentes de 'mouseMove' en todo el objeto del mapa funcionarán pero están equivocados. Esto es 'con una mano dura' y una mala idea, ya que los oyentes como estos pueden sumar en una aplicación real y, cuando se combinan con otras cosas que suceden en su mapa, ¡pueden causar serios problemas de rendimiento y posiblemente condiciones de carrera imprevistas!

La mejor manera de hacer esto es usar el google.maps.Polygon clase. Esto le permite pasar una serie de objetos latlng para crear un polígono. Este polígono se representa en el mapa y tiene un atributo de mouseover predeterminado de 'Pointer', puede agregar un oyente 'Mouseover' al objeto devuelto desde el new google.maps.Polygon Llamada de clase.

La siguiente fuente es de este ejemplohttp://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html

var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
  zoom: 5,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.TERRAIN
};

var bermudaTriangle;

map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
];

bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 3,
  fillColor: "#FF0000",
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);

Entonces puedo agregar al oyente así

google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
    map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top