1. ev
  2. Soru-cevap
  3. Google Map v3'te belirli bir alanda fare hareketi yaparken fare imlecini nasıl değiştiririm?

Google Map v3'te belirli bir alanda fare hareketi yaparken fare imlecini nasıl değiştiririm?

2010-04-01 13 views

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

kaynak

2010-04-01 03:31:38

+0

gibi dinleyici ekleyebilirsiniz, ancak bu örnekten aşağıda kaynağıdır kod aslında çalışır Kodumda denerim! – Michel

+1

Örnek sadece bir görüntüdür :) – Alp

+0

Polyline yerine Çokgen kullanırsam ne yapabilirdim? draggableCursor işe yaramadı ... imleç hala işaretçisi –

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

kaynak

2012-01-19 06:57:32 nomis

İlgili konular

 İlgili konular