¿Cómo cambio el cursor del mouse cuando uso el mouseover en un área particular en Google Map v3?

Uso de Google Maps API v3: ¿Cómo cambio el cursor del mouse cuando uso el mouseover en un área en particular?¿Cómo cambio el cursor del mouse cuando uso el mouseover en un área particular en Google Map v3?

Fuente

2010-04-01 zjm1126

Sí, esto es posible mediante el establecimiento de 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 una cruz una vez que el ratón se mueve dentro de la rectángulo rojo.

Google Maps Change Cursor http://img535.imageshack.us/img535/5923/mapcursor.png

Fuente

2010-04-01 03:31:38

El ejemplo no funciona por alguna razón, pero el código realmente funciona cuando ¡Lo intento en mi código! – Michel

El ejemplo es solo una imagen :) – Alp

¿Qué podría hacer si utilizo Polygon en lugar de polyline? draggableCursor no funcionó..cursor sigue siendo puntero –

Otras respuestas asesorar a poner oyentes mousemove 'en todo el objeto de mapa funciona, pero están equivocados. Esto es 'mano dura' y una mala idea ya que oyentes como estos pueden sumarse en una aplicación real y cuando se combinan con otras cosas que suceden en su mapa, pueden causar serios problemas de rendimiento y condiciones de carrera imprevistas.

La mejor manera de hacerlo es utilizar la clase google.maps.Polygon. 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 mouseover predeterminado de 'puntero', puede agregar un detector 'mouseover' al objeto devuelto desde la llamada de clase new google.maps.Polygon.

La fuente de abajo es de este ejemplo http://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 puede añadir el oyente como este

google.maps.event.addListener(bermudaTriangle, 'mouseover', function() { 
    map.setZoom(8); 
}); 
//now if you mouse over the Polygon area, your map will zoom to 8

Fuente

2012-01-19 06:57:32 nomis

¿Cómo cambio el cursor del mouse cuando uso el mouseover en un área particular en Google Map v3?

Respuesta

Cuestiones relacionadas