Tôi đang tìm cách hiển thị văn bản trên bản đồ Tờ rơi bằng cách sử dụng các điểm đánh dấu hoặc bất cứ thứ gì khác mà không hiển thị bất kỳ biểu tượng nào. Tôi muốn chỉ hiển thị văn bản và có thể tạo kiểu và xoay nó ... Có gợi ý nào không?
Tôi đang tìm cách hiển thị văn bản trên bản đồ Tờ rơi bằng cách sử dụng các điểm đánh dấu hoặc bất cứ thứ gì khác mà không hiển thị bất kỳ biểu tượng nào. Tôi muốn chỉ hiển thị văn bản và có thể tạo kiểu và xoay nó ... Có gợi ý nào không?
Câu trả lời:
Tôi đã giải quyết vấn đề của mình bằng cách sử dụng tính năng Leaflet L.DivIcon đại diện cho một biểu tượng nhẹ cho các điểm đánh dấu sử dụng phần tử div đơn giản thay vì hình ảnh ... Các điểm đánh dấu này có một tùy chọn html và className cho phép tôi tạo nhãn với css phong cách ...
Cập nhật cho Leaflet 1.0: Kể từ Leaflet 1.0, plugin Leaflet.label bị loại bỏ, vì nó đã được bao gồm trong lõi Leaflet như L.Tooltip
. Không cần bao gồm tập lệnh nguồn và cú pháp đã thay đổi một chút. Sử dụng mẫu:
var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);
Kiểu CSS có thể được áp dụng cho lớp theo cách tương tự như trước đây.
.my-label {
position: absolute;
width:1000px;
font-size:20px;
}
Dường như độ mờ đánh dấu có thể được đặt hoàn toàn thành 0.
<script src="scripts/leaflet.label.js"></script>
Với plugin Nhãn Lá, các nhãn được gắn trực tiếp vào các điểm đánh dấu, nhưng bạn có thể đặt độ mờ của điểm đánh dấu gần như bằng 0 để chỉ hiển thị nhãn. (Nếu bạn đặt độ mờ của điểm đánh dấu thành 0, nhãn liên quan cũng sẽ biến mất.)
var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);
Sau đó, bạn có thể sử dụng CSS để tạo kiểu cho nhãn của mình khi bạn thấy phù hợp:
.my-label {
position: absolute;
width:1000px;
font-size:20px;
}
L.Tooltip
bên trong onEachFeature, gặp lỗi: "Uncaught TypeError: Không thể thực thi 'appendChild' trên 'Node': tham số 1 không phải là loại 'Node'."
.toString()
vào cuối. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
Bạn có thể bắt đầu ở đây với plugin Leaflet này . Có thể tạo hoặc chỉnh sửa một điểm đánh dấu theo ý thích của bạn. Là văn bản đến từ các thuộc tính tính năng?
marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });
Điều này làm việc cho tôi