LeafletJS教程

LeafletJS - Markers

← 上一节 下一节 →

要在地图上标记单个位置，传单会提供标记.这些标记使用标准符号，这些符号可以自定义.在本章中，我们将了解如何添加标记以及如何自定义，动画和删除它们.

添加简单标记

要添加使用Leaflet JavaScript库的地图标记，请按照下面给出的步骤 : 去;

步骤1 : 通过传递< div >创建地图对象element(字符串或对象)和地图选项(可选).

第2步 : 通过传递所需图块的URL来创建图层对象.

步骤3 : 使用 Map 类的 addLayer()方法将图层对象添加到地图.

步骤4 : 通过传递表示要标记的位置的 latlng 对象来实例化标记类，如下所示.

//创建标记
 var marker = new L.Marker([17.385044,78.486671]);

第5步 : 使用 Marker 类的 addTo()方法将前面步骤中创建的标记对象添加到地图中.

//在地图上添加标记
 marker.addTo(map);

示例

以下代码设置名为Hyderabad(India)的城市的标记.

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

它生成以下输出 :

简单标记

将弹出窗口绑定到标记

要将显示消息的简单弹出窗口绑定到标记，请按照下面给出的步骤操作 :

第1步 : 通过传递< div >创建地图对象element(字符串或对象)和地图选项(可选).

第2步 : 通过传递所需图块的URL来创建图层对象.

步骤3 : 使用 Map 类的 addLayer()方法将图层对象添加到地图.

步骤4 : 通过传递表示要标记的位置的 latlng 对象来实例化标记类.

步骤5  : 去;使用 bindPopup()将弹出窗口附加到标记.如下所示.

//向标记添加弹出窗口
 marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();

第6步 : 最后，使用 Marker 类的 addTo()方法将前面步骤中创建的 Marker 对象添加到地图中.

示例

以下代码设置了Hyderabad(印度)城市的标记，并添加了弹出窗口.

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

它生成以下输出

弹出标记

标记选项

创建标记时，您还可以传递标记选项变量除了latlang对象.使用此变量，您可以将值设置为标记的各种选项，如图标，可拖动，键盘，标题，alt，zInsexOffset，不透明度，riseOnHover，riseOffset，窗格，可拖动等.

要使用地图选项创建地图，您需要按照下面给出的步骤 : 去;

步骤1 : 通过传递< div >创建地图对象element(字符串或对象)和地图选项(可选).

第2步 : 通过传递所需图块的URL来创建图层对象.

步骤3 : 使用 Map 类的 addLayer()方法将图层对象添加到地图.

步骤4 : 为markerOptions创建一个变量，并为所需选项指定值.

创建一个 markerOptions 对象(它就像文字一样创建)并设置选项的值 iconUrl 和 iconSize .

//标记
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

第5步 : 通过传递表示要标记的位置的 latlng 对象和在上一步中创建的选项对象来实例化标记类.

//创建标记
 var marker = L.marker([17.385044,78.486671]，markerOptions);

第6步 : 最后，使用 Marker 类的 addTo()方法将前面步骤中创建的 Marker 对象添加到地图中.

示例

以下代码设置了Hyderabad(印度)城市的标记.此标记是可点击的，可拖动，标题为 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>

它生成以下输出

标记选项

标记自定义图标

您也可以添加自己的图标，而不是Leaflet库提供的默认图标.您可以使用以下步骤将自定义图标添加到地图而不是默认图标.

步骤1 : 通过传递< div >创建地图对象element(字符串或对象)和地图选项(可选).

第2步 : 通过传递所需图块的URL来创建图层对象.

步骤3 : 使用 Map 类的 addLayer()方法将图层对象添加到地图.

步骤4 : 为 markerOptions 创建一个变量，并为所需选项指定值 :

  • iconUrl : 作为此选项的值，您需要传递一个 String 对象，指定要用作图标的图像路径.

  • iconSize : 使用此选项，您可以指定图标的大小.

注意 : 除此之外，您还可以将值设置为其他选项，例如iconSize，shadowSize，iconAnchor，shadowAnchor和popupAnchor.

使用 L.icon()创建自定义图标通过传递上面的选项变量，如下所示.

//图标选项
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}
//创建自定义图标
 var customIcon = L.icon( iconOptions);

第5步 : 为markerOptions创建变量，并为所需选项指定值.除此之外，通过将上一步中创建的图标变量作为值传递来指定图标.

 //标记的选项
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

第6步 : 通过传递 latlng 对象来实例化 Marker 类，该对象表示要标记的位置和上一步中创建的选项对象.

//创建标记
 var marker = L.marker([17.438139,78.395830]，markerOptions);

第7步 : 最后，使用 Marker 类的 addTo()方法将前面步骤中创建的 Marker 对象添加到地图中.

示例

以下代码在Tutorialspoint的位置设置标记.这里我们使用Tutorialspoint的徽标而不是默认标记.

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

← 上一节 下一节 →

相关菜鸟教程