Làm cách nào để thay đổi con trỏ mặc định trong bản đồ tờ rơi?

Question

Tôi đang cố sửa đổi biểu tượng con trỏ mặc định khi nhấn một nút điều khiển nhất định. Mặc dù tôi đã từng thành công bằng cách sử dụng css trên div vùng chứa, việc này sẽ ghi đè trạng thái con trỏ di chuyển, đó là điều tôi không muốn. Điều tôi ngụ ý với điều này là biểu tượng di chuyển không còn xuất hiện trong khi di chuyển qua bản đồ (nhưng không xuất hiện khi trên các điểm đánh dấu!).

Tôi muốn biết nếu có một cách không hacky thông qua api để đạt được hành vi con trỏ đặc biệt mà không cần sửa lại mọi thứ.

Đây là những gì tôi đã cố gắng thực hiện, #map là div vùng chứa cho bản đồ tờ rơi.

#map[control=pressed] { 
    cursor: url('..custom.png'); 
} 

Answer 1

Sửa 2017/05/18: CSS và Javascript liệu qua Tờ rơi Framework (recommended)

tôi đang tìm kiếm thông qua các mã nguồn cho the BoxZoom plugin và nhận thấy cách tiếp cận của họ sử dụng Leaflet's built-in DOM mutators và muốn quảng bá nó ở đây. ..đây chắc chắn là thực hành tốt nhất.

Example jsfiddle

Một nơi nào đó trong CSS của bạn bao gồm một lớp học như thế này ..

.leaflet-container.crosshair-cursor-enabled { 
    cursor:crosshair; 
} 

Khi bạn muốn kích hoạt chữ thập, làm điều này trong JS của bạn ..

// Assumes your Leaflet map variable is 'map'.. 
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled'); 

Sau đó, khi bạn muốn vô hiệu hóa crosshairs, hãy thực hiện điều này trong JS của bạn ..

L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled'); 

---

gốc trả lời: Bản đồ cấp crosshairs

@ scud42 đã cho tôi trên con đường đúng đắn. Bạn có thể sử dụng JQuery để thay đổi bản đồ con trỏ Tờ rơi như thế này:

$('.leaflet-container').css('cursor','crosshair'); 

Rồi sau đó, khi bạn muốn đặt lại con trỏ bản đồ, bạn có thể làm điều này:

$('.leaflet-container').css('cursor',''); 

---

Sửa 1,21 .2016: Mỗi tính năng chữ thập

Bạn cũng có thể kích hoạt tính năng chữ thập cho các tính năng cá nhân hỗ trợ tùy chọn className, chẳng hạn như một hình đa giác, hoặc đỉnh tính năng vv

Dưới đây là một ví dụ về một vertice kéo mà sẽ chuyển con trỏ chữ thập (jsfiddle):

var svg_html_default = '<div style="margin:0px;padding:0px;height:8px;width:8px;border-style:solid;border-color:#FFFFFF;border-width:1px;background-color:#424242"</div>'; 

var default_icon = L.divIcon({ 
    html: svg_html_default, 
    className: 'leaflet-mouse-marker', 
    iconAnchor: [5,5], 
    iconSize: [8,8] 
}); 

var m = new L.marker([33.9731003, -80.9968865], { 
    icon: default_icon, 
    draggable: true, 
    opacity: 0.7 
}).addTo(map); 

m.on("mouseover",function(){$('.leaflet-mouse-marker').css('cursor','crosshair');}); 

m.on("mouseout",function(){$('.leaflet-mouse-marker').css('cursor','');}); 

Answer 2

Sử dụng lớp học giả active.

#map:active { 
    cursor: url('..custom.png'); 
} 

JSFiddle

Đối trọng một con trỏ có thể bạn sẽ muốn sử dụng css3 Thuộc tính user-select: none để nó không chuyển đổi giữa các văn bản và mặc định con trỏ khi kéo trên phần tử. Triển khai đó cũng được hiển thị trong JSFiddle.

Answer 3

Kiểu của Leaflet cho phép bạn thay đổi một số hành vi con trỏ. Đặt chúng trong CSS cục bộ của bạn để thực hiện thay đổi.

/* Change cursor when mousing over clickable layer */ 
.leaflet-clickable { 
    cursor: crosshair !important; 
} 
/* Change cursor when over entire map */ 
.leaflet-container { 
    cursor: help !important; 
} 

Answer 4

Set để crosshair:

document.getElementById('map').style.cursor = 'crosshair' 

Đặt lại:

document.getElementById('map').style.cursor = ''