LeafletJS - Маркеры

Чтобы отметить одно место на карте, в листовке есть маркеры. Эти маркеры используют стандартный символ, и эти символы можно настроить. В этой главе мы увидим, как добавлять маркеры, а также как настраивать, анимировать и удалять их.

Добавление простого маркера

Чтобы добавить маркер на карту с помощью библиотеки Leaflet JavaScript, выполните следующие действия:

Step 1 - Создать Mapобъект, передав элемент < div > (строка или объект) и параметры карты (необязательно).

Step 2 - Создать Layer объект, передав URL-адрес нужной плитки.

Step 3 - Добавьте объект слоя на карту, используя addLayer() метод Map класс.

Step 4 - Создайте экземпляр Marker класс, передав latlng объект, представляющий позицию, которую необходимо отметить, как показано ниже.

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

Step 5 - Добавьте на карту объект-маркер, созданный на предыдущих шагах, с помощью addTo() метод Marker класс.

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

Он генерирует следующий вывод -

Привязка всплывающих окон к маркеру

Чтобы привязать простое всплывающее окно, отображающее сообщение, к маркеру, выполните следующие действия:

Step 1 - Создать Mapобъект, передав элемент < div > (строка или объект) и параметры карты (необязательно).

Step 2 - Создать Layer объект, передав URL-адрес нужной плитки.

Step 3 - Добавьте объект слоя на карту, используя addLayer() метод Map класс.

Step 4 - Создайте экземпляр Marker класс, передав latlng объект, представляющий позицию, которую нужно отметить.

Step 5 - Прикрепите всплывающее окно к маркеру, используя bindPopup() как показано ниже.

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

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

Он генерирует следующий вывод

Параметры маркера

При создании маркера вы также можете передать marker optionsпеременная в дополнение к объекту latlang. Используя эту переменную, вы можете устанавливать значения для различных опций маркера, таких как значок, перетаскиваемый, клавиатура, заголовок, alt, zInsexOffset, непрозрачность, riseOnHover, riseOffset, pane, dragable и т. Д.

Чтобы создать карту с использованием параметров карты, вам необходимо выполнить шаги, указанные ниже -

Step 1 - Создать Mapобъект, передав элемент < div > (строка или объект) и параметры карты (необязательно).

Step 2 - Создать Layer объект, передав URL-адрес нужной плитки.

Step 3 - Добавьте объект слоя на карту, используя addLayer() метод Map класс.

Step 4 - Создайте переменную для markerOptions и укажите значения для необходимых опций.

Создать markerOptions объект (он создается как литерал) и устанавливает значения для параметров iconUrl и iconSize.

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

Step 5 - Создайте экземпляр Marker класс, передав latlng объект, представляющий позицию, которую необходимо отметить, и объект параметров, созданный на предыдущем шаге.

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

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

Он генерирует следующий вывод

Пользовательские значки маркеров

Вместо значка по умолчанию, предоставляемого библиотекой Leaflet, вы также можете добавить свой собственный значок. Вы можете использовать следующие шаги, чтобы добавить на карту собственный значок вместо значка по умолчанию.

Step 1 - Создать Mapобъект, передав элемент < div > (строка или объект) и параметры карты (необязательно).

Step 2 - Создать Layer объект, передав URL-адрес нужной плитки.

Step 3 - Добавьте объект слоя на карту, используя addLayer() метод Map класс.

Step 4 - Создайте переменную для markerOptions и укажите значения для необходимых опций -

  • iconUrl - В качестве значения этой опции вам необходимо передать String объект, указывающий путь к изображению, которое вы хотите использовать в качестве значка.

  • iconSize - Используя эту опцию, вы можете указать размер значка.

Note - Помимо этого, вы также можете установить значения для других параметров, таких как 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);

Step 5- Создайте переменную для markerOptions и укажите значения для необходимых опций. В дополнение к этому укажите значок, передав в качестве значения переменную значка, созданную на предыдущем шаге.

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

Step 6 - Создайте экземпляр Marker класс, передав latlng объект, представляющий позицию, которую необходимо отметить, и объект параметров, созданный на предыдущем шаге.

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

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

Он генерирует следующий вывод

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