Tờ rơiJS - Xử lý sự kiện
Chương trình JavaScript tờ rơi có thể phản hồi các sự kiện khác nhau do người dùng tạo ra. Trong chương này, chúng tôi sẽ cung cấp một vài ví dụ minh họa cách thực hiện xử lý sự kiện khi làm việc với Leaflet.
Xử lý sự kiện
Làm theo các bước dưới đây để thêm sự kiện vào bản đồ.
Step 1 - Tạo một Mapđối tượng bằng cách chuyển một phần tử < div > (Chuỗi hoặc đối tượng) và các tùy chọn bản đồ (tùy chọn).
Step 2 - Tạo một Layer đối tượng bằng cách chuyển URL của ô mong muốn.
Step 3 - Thêm đối tượng lớp vào bản đồ bằng cách sử dụng addLayer() phương pháp của Map lớp học.
Step 4 - Thêm trình xử lý vào bản đồ, như hình dưới đây.
map.on("click", function(e){
new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})Thí dụ
Đoạn mã sau minh họa việc xử lý đồng đều bằng cách sử dụng Tờ rơi. Khi thực hiện, nếu bạn nhấp vào bản đồ, điểm đánh dấu sẽ được tạo trên vị trí cụ thể đó.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons</title>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id = "map" style = "width: 900px; height: 580px"></div>
<script>
// Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
map.on("click", function(e){
new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})
</script>
</body>
</html>Nó tạo ra kết quả sau:
