Question Comment changer le curseur de la souris lorsque je survole une zone particulière de Google Map v3?


Utilisation de Google Maps API v3: Comment changer le curseur de la souris lorsque je survole une zone particulière?


14
2018-04-01 01:48


origine


Réponses:


Oui, c'est possible en définissant draggableCursor dans 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 se transforme en une croix lorsque la souris est déplacée dans le rectangle rouge.

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


26
2018-04-01 03:31



Les autres réponses recommandant de placer les auditeurs «mousemove» sur l’ensemble de l’objet de la carte fonctionneront mais sont erronées. C'est une lourde tâche et une mauvaise idée, car les auditeurs comme ceux-là peuvent ajouter dans une application réelle et, combinés avec d'autres événements sur votre carte, peuvent causer de sérieux problèmes de performance et des conditions de course imprévues!

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

La source ci-dessous provient 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 ça

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

2
2018-01-19 06:57