爲了在地圖上標記單個位置，傳單提供了標記。這些標記使用標準符號，並且可以自定義這些符號。在本章中，我們將看到如何添加標記以及如何自定義，動畫化和刪除它們。
添加一個簡單的Marker
要使用Leaflet JavaScript庫將標記添加到地圖，請遵循以下步驟-
步驟1-通過傳遞< div >元素（字符串或對象）和地圖選項（可選）來創建地圖對象。
步驟2-通過傳遞所需圖塊的URL 創建一個Layer對象。
第3步 -使用Map類的addLayer（）方法將圖層對象添加到地圖。
步驟4-通過傳遞表示要標記位置的latlng對象來實例化Marker類，如下所示。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);
</span>
步驟5-使用Marker類的addTo（）方法將在先前步驟中創建的標記對象添加到地圖。
<span style="color:rgba(0, 0, 0, 0.87)">// Adding marker to the map
marker.addTo(map);
</span>
例
以下代碼在名爲海得拉巴（印度）的城市上設置標記。
<span style="color:rgba(0, 0, 0, 0.87)"><!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></span>
它生成以下輸出-
將彈出窗口綁定到Marker
要將顯示消息的簡單彈出窗口綁定到標記，請遵循以下步驟-
步驟1-通過傳遞< div >元素（字符串或對象）和地圖選項（可選）來創建地圖對象。
步驟2-通過傳遞所需圖塊的URL 創建一個Layer對象。
第3步 -使用Map類的addLayer（）方法將圖層對象添加到地圖。
步驟4-通過傳遞表示要標記位置的latlng對象來實例化Marker類。
步驟5-使用bindPopup（）將彈出窗口附加到標記，如下所示。
<span style="color:rgba(0, 0, 0, 0.87)">// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();
</span>
步驟6-最後，使用Marker類的addTo（）方法將在先前步驟中創建的Marker對象添加到地圖。
例
以下代碼在海得拉巴（印度）城市上設置了標記，並向其添加了一個彈出窗口。
<span style="color:rgba(0, 0, 0, 0.87)"><!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></span>
它產生以下輸出
Marker 選項
創建標記時，除了latlang對象之外，您還可以傳遞標記選項變量。使用此變量，可以將值設置爲標記的各種選項，例如圖標，可拖動，鍵盤，標題，alt，zInsexOffset，不透明度，riseOnHover，riseOffset，窗格，可拖動等。
要使用地圖選項創建地圖，您需要執行以下步驟-
步驟1-通過傳遞< div >元素（字符串或對象）和地圖選項（可選）來創建地圖對象。
步驟2-通過傳遞所需圖塊的URL 創建一個Layer對象。
第3步 -使用Map類的addLayer（）方法將圖層對象添加到地圖。
步驟4-爲markerOptions創建一個變量，併爲所需的選項指定值。
創建一個markerOptions對象（它就像一個文字一樣創建），並設置選項iconUrl和iconSize的值。
<span style="color:rgba(0, 0, 0, 0.87)">// Options for the marker
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true
}</span>
步驟5-通過傳遞表示在上一步中創建的位置和選項對象的latlng對象，實例化Marker類。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);
</span>
步驟6-最後，使用Marker類的addTo（）方法將在先前步驟中創建的Marker對象添加到地圖。
例
以下代碼在印度海得拉巴市上設置了標記。該標記是可單擊的，並且可以拖動並帶有標題MyLocation。
<span style="color:rgba(0, 0, 0, 0.87)"><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></span>
它產生以下輸出
Marker 自定義圖標
除了Leaflet庫提供的默認圖標，您還可以添加自己的圖標。您可以使用以下步驟將自定義圖標添加到地圖，而不是默認圖標。
步驟1-通過傳遞< div >元素（字符串或對象）和地圖選項（可選）來創建地圖對象。
步驟2-通過傳遞所需圖塊的URL 創建一個Layer對象。
第3步 -使用Map類的addLayer（）方法將圖層對象添加到地圖。
步驟4-爲markerOptions創建一個變量，併爲所需的選項指定值-
-
iconUrl-作爲此選項的值，您需要傳遞一個String對象，該對象指定要用作圖標的圖像的路徑。
-
iconSize-使用此選項，您可以指定圖標的大小。
注意 -除了這些，您還可以將值設置爲其他選項，例如iconSize，shadowSize，iconAnchor，shadowAnchor和popupAnchor。
通過傳遞上述options變量，使用L.icon（）創建一個自定義圖標，如下所示。
<span style="color:rgba(0, 0, 0, 0.87)">// Icon options
var iconOptions = {
iconUrl: 'logo.png',
iconSize: [50, 50]
}
// Creating a custom icon
var customIcon = L.icon(iconOptions);
</span>
步驟5-爲markerOptions創建一個變量，併爲所需的選項指定值。除此之外，還可以通過傳遞在上一步中創建的icon變量作爲值來指定圖標。
<span style="color:rgba(0, 0, 0, 0.87)">// Options for the marker
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true,
icon: customIcon
}
</span>
步驟6-通過傳遞表示要標記位置的latlng對象和在上一步中創建的options對象，實例化Marker類。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);
</span>
步驟7-最後，使用Marker類的addTo（）方法將在先前步驟中創建的Marker對象添加到地圖。
例
以下代碼在Tutorialspoint的位置上設置標記。在這裏，我們使用Tutorialspoint的徽標代替默認標記。
<span style="color:rgba(0, 0, 0, 0.87)"><!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></span>
它產生以下輸出
