将鼠标悬停在Google Map v3中的特定区域时，如何更改鼠标光标？

Using the Google Maps API v3: How do I change the mouse cursor when I mouseover on a particular area?

使用Google Maps API v3：当鼠标悬停在特定区域时，如何更改鼠标光标？

2 个解决方案

#1

Yes, this is possible by setting draggableCursor in MapOptions, as in the following example:

是的，这可以通过在MapOptions中设置draggableCursor来实现，如下例所示：

<!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>

If you run the above example, the cursor would change to a cross hair once the mouse is moved inside the red rectangle.

如果运行上面的示例，一旦鼠标在红色矩形内移动，光标将变为十字线。

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

#2

Other answers advising to to put 'mousemove' listeners on the whole map object will work but are wrong. This is 'heavy handed' and a bad idea as listeners like these can add up in a real application and when combined with other things happening on your map, can cause serious performance problems and possibly unforeseen race conditions!

建议将'mousemove'监听器放在整个地图对象上的其他答案可行，但是错误。这是“沉重的”，这是一个糟糕的主意，因为像这样的听众可以加入一个真实的应用程序，当与你的地图上发生的其他事情结合，可能会导致严重的性能问题和可能无法预料的竞争条件！

The BEST way to do this is to use the google.maps.Polygon class. This allows you to pass a series of LatLng objects to create a Polygon. This polygon is rendered on the map and has a default mouseover attribute of 'pointer', you can add a 'mouseover' listener to the object returned from the new google.maps.Polygon class call.

最好的方法是使用google.maps.Polygon类。这允许您传递一系列LatLng对象以创建多边形。此多边形在地图上呈现并具有默认的鼠标悬停属性“指针”，您可以将“鼠标悬停”侦听器添加到从新的google.maps.Polygon类调用返回的对象中。

The source below is from this example http://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html

以下来源来自此示例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);

Then I can add the listener like this

然后我可以像这样添加监听器

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

#1