Utilizzo dell'API di Google Maps v3: Come si modifica il puntatore del mouse quando si passa il mouse su un'area specifica?Come cambio il cursore del mouse quando passo con il mouse su una determinata area in Google Map v3?
Sì, questo è possibile impostando draggableCursor in MapOptions, come nel seguente esempio:
<!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>
Se si esegue l'esempio precedente, il cursore si trasformerà in un mirino una volta che il mouse viene spostato all'interno della rettangolo rosso.
Google Maps Change Cursor http://img535.imageshack.us/img535/5923/mapcursor.png
altre risposte consigliando a per mettere ascoltatori MouseMove 'sull'oggetto mappa intera funzionerà, ma si sbagliano. Si tratta di una "mano pesante" e una cattiva idea in quanto ascoltatori come questi possono sommarsi in una vera applicazione e, se combinati con altre cose che accadono sulla mappa, possono causare seri problemi di prestazioni e possibilmente condizioni di gara impreviste!
Il modo migliore per farlo è utilizzare la classe google.maps.Polygon. Ciò consente di passare una serie di oggetti LatLng per creare un poligono. Questo poligono viene visualizzato sulla mappa e ha un attributo mouseover predefinito di "puntatore", è possibile aggiungere un listener "mouseover" all'oggetto restituito dalla chiamata di classe new google.maps.Polygon.
La fonte qui di seguito è da questo esempio 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);
allora posso aggiungere l'ascoltatore come questo
google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8
L'esempio non funziona per qualche ragione, ma in realtà il codice funziona quando Lo provo nel mio codice! – Michel
L'esempio è solo un'immagine :) – Alp
Cosa posso fare se utilizzo Polygon anziché polilinea? draggableCursor non ha funzionato ... il cursore è ancora puntatore –