Comment puis-je changer le curseur de la souris lorsque je mouseOver sur une zone particulière dans Google Map v3?

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

Question

En utilisant l'API Google Maps v3: Comment puis-je changer le curseur de la souris lorsque je mouseOver sur un domaine particulier

Était-ce utile?

La solution

Oui, cela est possible par la mise en draggableCursor MapOptions, comme dans l'exemple suivant: 

<!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 vous exécutez l'exemple ci-dessus, le curseur changerait à une croix une fois que la souris est déplacé à l'intérieur du rectangle rouge.

Autres conseils

D'autres réponses conseillant de mettre les auditeurs « » de mousemove sur l'ensemble de l'objet carte fonctionnera mais ne sont pas. C'est « main lourde » et une mauvaise idée que les auditeurs comme ceux-ci peuvent ajouter dans une application réelle et lorsqu'il est combiné avec d'autres choses qui se passent sur votre carte, peut causer de graves problèmes de performance et éventuellement imprévues des conditions de course!

La meilleure façon de le faire est d'utiliser la classe google.maps.Polygon. Cela vous permet de passer une série d'objets LatLng pour créer un Polygon. Ce polygone est rendu sur la carte et a un attribut par défaut MouseOver « pointeur », vous pouvez ajouter un écouteur « mouseover » à l'objet retourné par l'appel de classe new google.maps.Polygon.

La source ci-dessous est de cet exemple 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);

Alors je peux ajouter l'auditeur comme ceci 

google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
    map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top