14
Google Maps API'yi Kullanma v3: Belirli bir alanda fare imlecini değiştirdiğimde fare imlecini nasıl değiştirebilirim?Google Map v3'te belirli bir alanda fare hareketi yaparken fare imlecini nasıl değiştiririm?
A
cevap
25
Evet, bu aşağıdaki örnekte olduğu gibi, mapOptions içinde draggableCursor ayarlayarak mümkündür: Yukarıdaki örneği çalıştırırsanız
<!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>
, imleç çapraz saça fare içine taşınır kez değiştirecek kırmızı dikdörtgen. için danışmanlık
Google Maps Change Cursor http://img535.imageshack.us/img535/5923/mapcursor.png
2
Diğer cevaplar çalışacak tüm harita nesne üzerinde 'mousemove' dinleyicileri koymak ama yanlış için. Bu, 'ağır elle' ve bu gibi dinleyiciler, gerçek bir uygulamada toplayabildiğinden ve haritanızdaki diğer şeylerle birleştirildiğinde ciddi performans problemlerine ve muhtemelen öngörülemeyen yarış koşullarına neden olabileceğinden kötü bir fikir!
Bunu yapmanın en iyi yolu, google.maps.Polygon sınıfını kullanmaktır. Bu, bir Çokgen oluşturmak için bir dizi LatLng nesnesi geçirmenizi sağlar. Bu çokgen, harita üzerinde oluşturulur ve 'işaretçi' varsayılan bir mouseover özniteliğine sahiptir, new google.maps.Polygon sınıf çağrısından döndürülen nesneye bir 'mouseover' dinleyicisi ekleyebilirsiniz.
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);
Sonra örnek nedense çalışmıyor bu
google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
map.setZoom(8);
});
//now if you mouse over the Polygon area, your map will zoom to 8
gibi dinleyici ekleyebilirsiniz, ancak bu örnekten aşağıda kaynağıdır kod aslında çalışır Kodumda denerim! – Michel
Örnek sadece bir görüntüdür :) – Alp
Polyline yerine Çokgen kullanırsam ne yapabilirdim? draggableCursor işe yaramadı ... imleç hala işaretçisi –