Làm cách nào để thay đổi con trỏ chuột khi tôi di chuột qua một khu vực cụ thể trong Google Map v3?

Sử dụng API Google Maps v3: Làm cách nào để thay đổi con trỏ chuột khi tôi di chuột qua một khu vực cụ thể?Làm cách nào để thay đổi con trỏ chuột khi tôi di chuột qua một khu vực cụ thể trong Google Map v3?

Nguồn

2010-04-01 zjm1126

Có, đây là có thể bằng cách thiết lập draggableCursor trong mapTùy chọn, như trong ví dụ sau:

<!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>

Nếu bạn chạy các ví dụ trên, con trỏ sẽ thay đổi để một mái tóc ngang khi chuột được di chuyển bên trong hình chữ nhật màu đỏ.

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

Nguồn

2010-04-01 03:31:38

Ví dụ không làm việc cho một số lý do, nhưng mã thực sự hoạt động khi Tôi thử nó trong mã của tôi! – Michel

Ví dụ này chỉ là một hình ảnh :) – Alp

Tôi có thể làm gì nếu tôi sử dụng Đa giác thay vì polyline? draggableCursor didnt work..cursor vẫn là con trỏ –

câu trả lời khác tham mưu để đưa người nghe 'MouseMove' trên đối tượng bản đồ toàn bộ sẽ làm việc nhưng là sai. Đây là 'nặng tay' và một ý tưởng tồi khi người nghe như vậy có thể thêm vào trong một ứng dụng thực tế và khi kết hợp với những thứ khác xảy ra trên bản đồ của bạn, có thể gây ra các vấn đề nghiêm trọng về hiệu suất và điều kiện chạy đua không lường trước được!

Cách tốt nhất để làm điều này là sử dụng lớp google.maps.Polygon. Điều này cho phép bạn vượt qua một loạt các đối tượng LatLng để tạo một Đa giác. Đa giác này được hiển thị trên bản đồ và có thuộc tính mouseover mặc định là 'pointer', bạn có thể thêm người nghe 'mouseover' vào đối tượng được trả về từ cuộc gọi lớp new google.maps.Polygon.

Nguồn dưới đây là từ ví dụ này 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);

Sau đó, tôi có thể thêm người nghe như thế này

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

Nguồn

2012-01-19 06:57:32 nomis

Làm cách nào để thay đổi con trỏ chuột khi tôi di chuột qua một khu vực cụ thể trong Google Map v3?

Trả lời

Các vấn đề liên quan