API
Спутник/КартыJavaScript API Спутник/Карты
JavaScript API Спутник/Карты
Добавить маркер
Добавить одиночный маркер можно одним из следующих способов:
<div id="map1"></div>
<script>
var map1 = L.sm.map('map1'); // создаем карту
var myMarker1 = L.sm.marker([55.55, 37.6167]); // создаем маркер с координатами
map1.addLayer(myMarker1); // первый способ: карта добавляет маркер
var myMarker2 = L.sm.marker([55.65, 37.6167], {type: 'location-firebrick'});
myMarker2.addTo(map1); // второй способ: маркер добавляет себя на карту
</script>
Используя параметр type
, можно выбрать один из следующих видов маркера:
type | маркер | type | маркер |
---|---|---|---|
default |
![]() |
alt1 |
![]() |
alt2 |
![]() |
alt3 |
![]() |
location-cfblue |
target-cfblue |
||
location-chocolate |
target-chocolate |
||
location-coral |
target-coral |
||
location-darkcyan |
target-darkcyan |
||
location-darkorange |
target-darkorange |
||
location-firebrick |
target-firebrick |
||
location-lawngreen |
target-lawngreen |
||
location-mediumblue |
target-mediumblue |
||
location-seagreen |
target-seagreen |
||
location-skyblue |
target-skyblue |
||
location-steelblue |
target-steelblue |
||
location-tomato |
target-tomato |
URL иконки маркера
iconUrl
= ‘path/to/image.png’
Размер иконки
При необходимости можно указать размеры иконки в пикселах:iconSize
= [<ширина>, <высота>],
либо имя CSS-класса для иконки:iconClassName
= ‘icon-w25h41’.
<style>
.icon-w25h41 {
width: 25px;
height: 41px;
}
</style>
<div id="map2"></div>
<script>
var map2 = L.sm.map('map2'); // создаем карту
var myMarker21 = L.sm.marker([55.85, 37.61], {
iconUrl: '//maps-js.apissputnik.ru/v0.3/images/marker-icon.png',
iconSize: [38, 61] // размер иконки
});
myMarker21.addTo(map2);
var myMarker22 = L.sm.marker([55.65, 37.67], {
iconUrl: '//maps-js.apissputnik.ru/v0.3/images/marker-icon-2x.png',
iconClassName: 'icon-w25h41' // CSS-класс иконки
});
myMarker22.addTo(map2);
</script>
Класс маркера
className
– атрибутclass
DOM-элемента маркера
Полный список параметров иконки в документации Leaflet.
Полный контроль над иконками
Описанный выше способ работы с иконками подходит для простых задач. В случаях, когда нужна ссылка на объект иконки,
используйте конструктор иконок L.icon()
, такой объект можно передать маркеру в параметре icon
.
<div id="map3"></div>
<script>
var map3 = L.sm.map('map3'); // создаем карту
var myIcon3 = L.icon({ // создаем иконку
iconUrl: '//maps-js.apissputnik.ru/v0.3/images/marker-icon.png'
});
var myMarker30 = L.sm.marker([55.85, 37.61], {
icon: myIcon3 // передаем иконку маркеру
});
myMarker30.addTo(map3); // добавляем маркер на карту
</script>