Tờ rơiJS - Điểm đánh dấu

Để đánh dấu một vị trí trên bản đồ, tờ rơi cung cấp các điểm đánh dấu. Những điểm đánh dấu này sử dụng một ký hiệu tiêu chuẩn và những ký hiệu này có thể được tùy chỉnh. Trong chương này, chúng ta sẽ xem cách thêm điểm đánh dấu và cách tùy chỉnh, tạo hoạt ảnh và xóa chúng.

Thêm một điểm đánh dấu đơn giản

Để thêm điểm đánh dấu vào bản đồ bằng thư viện JavaScript của Tờ rơi, hãy làm theo các bước dưới đây:

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 - Khởi tạo Marker lớp bằng cách vượt qua một latlng đối tượng đại diện cho vị trí được đánh dấu, như hình dưới đây.

// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);

Step 5 - Thêm đối tượng đánh dấu được tạo trong các bước trước đó vào bản đồ bằng cách sử dụng addTo() phương pháp của Marker lớp học.

// Adding marker to the map
marker.addTo(map);

Thí dụ

Đoạn mã sau đặt điểm đánh dấu cho thành phố có tên Hyderabad (Ấn Độ).

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</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: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671]);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Nó tạo ra kết quả sau:

Liên kết cửa sổ bật lên với Marker

Để liên kết một cửa sổ bật lên đơn giản hiển thị thông báo với một điểm đánh dấu, hãy làm theo các bước được cung cấp bên dưới:

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 - Khởi tạo Marker lớp bằng cách vượt qua một latlng đối tượng đại diện cho vị trí cần đánh dấu.

Step 5 - Đính kèm cửa sổ bật lên vào điểm đánh dấu bằng cách sử dụng bindPopup() như hình bên dưới.

// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();

Step 6 - Cuối cùng, thêm Marker đối tượng được tạo trong các bước trước với bản đồ bằng cách sử dụng addTo() phương pháp của Marker lớp học.

Thí dụ

Đoạn mã sau đặt điểm đánh dấu cho thành phố Hyderabad (Ấn Độ) và thêm cửa sổ bật lên vào đó.

<!DOCTYPE html>
<html>
   <head>
      <title>Binding pop-Ups to marker</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: [17.385044, 78.486671],
            zoom: 15
         }
         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
         var marker = L.marker([17.438139, 78.395830]);    // Creating a Marker
         
         // Adding popup to the marker
         marker.bindPopup('This is Tutorialspoint').openPopup();
         marker.addTo(map); // Adding marker to the map
      </script>
   </body>
   
</html>

Nó tạo ra kết quả sau

Tùy chọn điểm đánh dấu

Trong khi tạo điểm đánh dấu, bạn cũng có thể vượt qua marker optionsngoài đối tượng latlang. Sử dụng biến này, bạn có thể đặt giá trị cho các tùy chọn khác nhau của điểm đánh dấu như biểu tượng, có thể kéo, bàn phím, tiêu đề, alt, zInsexOffset, opacity, roseOnHover, tăngOffset, ngăn, có thể kéo, v.v.

Để tạo bản đồ bằng cách sử dụng các tùy chọn bản đồ, bạn cần làm theo các bước được cung cấp bên dưới -

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 - Tạo một biến cho markerOptions và chỉ định giá trị cho các tùy chọn cần thiết.

Tạo một markerOptions đối tượng (nó được tạo giống như một chữ) và đặt giá trị cho các tùy chọn iconUrl và iconSize.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

Step 5 - Khởi tạo Marker lớp bằng cách vượt qua một latlng đối tượng đại diện cho vị trí được đánh dấu và đối tượng tùy chọn, được tạo ở bước trước.

// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);

Step 6 - Cuối cùng, thêm Marker đối tượng được tạo trong các bước trước với bản đồ bằng cách sử dụng addTo() phương pháp của Marker lớp học.

Thí dụ

Đoạn mã sau đặt điểm đánh dấu thành phố Hyderabad (Ấn Độ). Điểm đánh dấu này có thể nhấp, có thể kéo với tiêu đềMyLocation.

<html>
   <head>
      <title>Marker Options Example</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: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating a Marker
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true
         }
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671], markerOptions);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Nó tạo ra kết quả sau

Biểu tượng tùy chỉnh của điểm đánh dấu

Thay vì biểu tượng mặc định do thư viện Tờ rơi cung cấp, bạn cũng có thể thêm biểu tượng của riêng mình. Bạn có thể sử dụng các bước sau để thêm biểu tượng tùy chỉnh vào bản đồ thay vì biểu tượng mặc định.

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 - Tạo một biến cho markerOptions và chỉ định giá trị cho các tùy chọn bắt buộc -

  • iconUrl - Là một giá trị cho tùy chọn này, bạn cần chuyển một String đối tượng xác định đường dẫn của hình ảnh mà bạn muốn sử dụng làm biểu tượng.

  • iconSize - Sử dụng tùy chọn này, bạn có thể chỉ định kích thước của biểu tượng.

Note - Ngoài những điều này, bạn cũng có thể đặt giá trị cho các tùy chọn khác như iconSize, shadowSize, iconAnchor, shadowAnchor và popupAnchor.

Tạo biểu tượng tùy chỉnh bằng L.icon() bằng cách chuyển biến tùy chọn ở trên như hình dưới đây.

// Icon options
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}

// Creating a custom icon
var customIcon = L.icon(iconOptions);

Step 5- Tạo một biến cho markerOptions và chỉ định giá trị cho các tùy chọn cần thiết. Ngoài những điều này, hãy chỉ định biểu tượng bằng cách chuyển biến biểu tượng đã tạo ở bước trước dưới dạng giá trị.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

Step 6 - Khởi tạo Marker lớp bằng cách vượt qua một latlng đối tượng đại diện cho vị trí được đánh dấu và đối tượng tùy chọn đã tạo ở bước trước.

// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);

Step 7 - Cuối cùng, thêm Marker đối tượng được tạo trong các bước trước với bản đồ bằng cách sử dụng addTo() phương pháp của Marker lớp học.

Thí dụ

Đoạn mã sau đặt điểm đánh dấu vào vị trí của Tutorialspoint. Ở đây chúng tôi đang sử dụng biểu trưng của Tutorialspoint thay vì điểm đánh dấu mặc định.

<!DOCTYPE html>
<html>
   <head>
      <title>Marker Custom Icons Example</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: [17.438139, 78.395830],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

         // Adding layer to the map
         map.addLayer(layer);
         
         // Icon options
         var iconOptions = {
            iconUrl: 'logo.png',
            iconSize: [50, 50]
         }
         // Creating a custom icon
         var customIcon = L.icon(iconOptions);
         
         // Creating Marker Options
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true,
            icon: customIcon
         }
         // Creating a Marker
         var marker = L.marker([17.438139, 78.395830], markerOptions);
         
         // Adding popup to the marker
         marker.bindPopup('Hi welcome to Tutorialspoint').openPopup();
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Nó tạo ra kết quả sau

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved