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

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

2010-04-01 zjm1126

是的，这是在这个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>

如果你运行上面的例子中，光标会变成一个十字线，一旦鼠标内部的移动红色的矩形。

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

来源

2010-04-01 03:31:38

的例子并不出于某种原因，但代码实际工作时我在我的代码中尝试它！ – Michel 2011-07-12 13:54:42

该示例只是一个图像:) – Alp 2012-08-18 09:40:36

如果使用多边形而不是多段线，该怎么办？ draggableCursor did not work ..cursor仍然是指针 – 2013-05-08 22:07:24

建议到其他的答案把整个地图对象“鼠标移动”听众会工作，但都错了。这是“沉重的手”，一个糟糕的主意，因为这样的听众可以加入一个真正的应用程序，并与地图上发生的其他事情相结合，可能会导致严重的性能问题和可能无法预料的竞争条件！

最好的方法是使用google.maps.Polygon类。这使您可以传递一系列LatLng对象来创建多边形。此多边形在地图上呈现，并具有默认的mouseover属性为'pointer'，您可以向类调用返回的对象添加'mouseover'侦听器。

从这个例子下面的来源是 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);

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

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

来源

2012-01-19 06:57:32 nomis

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

回答

相关问题