LeafletJS - 標記

上一頁
下一頁

為了在地圖上標記單個位置，Leaflet 提供了標記。這些標記使用標準符號，並且這些符號可以自定義。在本節中，我們將學習如何新增標記以及如何自定義、動畫和刪除它們。

新增簡單標記

要使用 Leaflet JavaScript 庫在地圖上新增標記，請按照以下步驟操作：

步驟 1 - 透過傳遞一個 <div> 元素（字串或物件）和地圖選項（可選）來建立一個 Map 物件。

步驟 2 - 透過傳遞所需瓦片的 URL 來建立一個 Layer 物件。

步驟 3 - 使用 Map 類的 addLayer() 方法將圖層物件新增到地圖。

步驟 4 - 透過傳遞表示要標記的位置的 latlng 物件來例項化 Marker 類，如下所示。

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

步驟 5 - 使用 Marker 類的 addTo() 方法將上一步中建立的標記物件新增到地圖。

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

示例

以下程式碼將標記設定在海德拉巴市（印度）。

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

它生成以下輸出：

Simple Marker

將彈出視窗繫結到標記

要將顯示訊息的簡單彈出視窗繫結到標記，請按照以下步驟操作：

步驟 1 - 透過傳遞一個 <div> 元素（字串或物件）和地圖選項（可選）來建立一個 Map 物件。

步驟 2 - 透過傳遞所需瓦片的 URL 來建立一個 Layer 物件。

步驟 3 - 使用 Map 類的 addLayer() 方法將圖層物件新增到地圖。

步驟 4 - 透過傳遞表示要標記的位置的 latlng 物件來例項化 Marker 類。

步驟 5 - 使用 bindPopup() 將彈出視窗附加到標記，如下所示。

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

步驟 6 - 最後，使用 Marker 類的 addTo() 方法將上一步中建立的 Marker 物件新增到地圖。

示例

以下程式碼將標記設定在海德拉巴市（印度），並向其新增一個彈出視窗。

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

它生成以下輸出：

Pop-ups to the Marker

標記選項

建立標記時，除了 latlng 物件之外，還可以傳遞一個 marker options 變數。使用此變數，可以為標記的各種選項設定值，例如圖示、可拖動、鍵盤、標題、替代文字、zInsexOffset、不透明度、懸停時升起、升起偏移量、面板、可拖動等。

要使用地圖選項建立地圖，需要按照以下步驟操作：

步驟 1 - 透過傳遞一個 <div> 元素（字串或物件）和地圖選項（可選）來建立一個 Map 物件。

步驟 2 - 透過傳遞所需瓦片的 URL 來建立一個 Layer 物件。

步驟 3 - 使用 Map 類的 addLayer() 方法將圖層物件新增到地圖。

步驟 4 - 建立一個 markerOptions 變數併為所需選項指定值。

建立一個 markerOptions 物件（就像文字一樣建立）併為選項 iconUrl 和 iconSize 設定值。

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

步驟 5 - 透過傳遞表示要標記的位置的 latlng 物件和上一步中建立的選項物件來例項化 Marker 類。

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

步驟 6 - 最後，使用 Marker 類的 addTo() 方法將上一步中建立的 Marker 物件新增到地圖。

示例

以下程式碼將標記設定在海德拉巴市（印度）。此標記是可點選的，可拖動的，標題為 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>

它生成以下輸出：

Marker Options

自定義標記圖示

除了 Leaflet 庫提供的預設圖示外，還可以新增自己的圖示。可以使用以下步驟在地圖上新增自定義圖示，而不是預設圖示。

步驟 1 - 透過傳遞一個 <div> 元素（字串或物件）和地圖選項（可選）來建立一個 Map 物件。

步驟 2 - 透過傳遞所需瓦片的 URL 來建立一個 Layer 物件。

步驟 3 - 使用 Map 類的 addLayer() 方法將圖層物件新增到地圖。

步驟 4 - 建立一個 markerOptions 變數併為所需選項指定值：

  • iconUrl - 作為此選項的值，需要傳遞一個 String 物件，指定要用作圖示的影像路徑。

  • iconSize - 使用此選項，可以指定圖示的大小。

注意 - 除此之外，還可以為其他選項設定值，例如 iconSize、shadowSize、iconAnchor、shadowAnchor 和 popupAnchor。

透過傳遞上述選項變數來使用 L.icon() 建立自定義圖示，如下所示。

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

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

步驟 5 - 建立一個 markerOptions 變數併為所需選項指定值。此外，透過傳遞上一步中建立的 icon 變數作為值來指定圖示。

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

步驟 6 - 透過傳遞表示要標記的位置的 latlng 物件和上一步中建立的選項物件來例項化 Marker 類。

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

步驟 7 - 最後，使用 Marker 類的 addTo() 方法將上一步中建立的 Marker 物件新增到地圖。

示例

以下程式碼將標記設定在 Tutorialspoint 的位置。這裡我們使用 Tutorialspoint 的 logo 代替預設標記。

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

它生成以下輸出：

Marker Custom Icons
列印頁面
上一頁
下一頁
廣告