當我將鼠標懸停在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中的特定區域上時，如何更改鼠標光標？

回答

相關問題