Создание кастомной метки на Яндекс Картах
Для того чтобы использовать свою метку на яндекс картах, следует подключить компоненты API Яндекс.Карт:
|
1 |
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> |
После этого создадим div в котором будет располагаться наша карта:
|
1 |
<div id="map"></div> |
В стилях обязательно указываем размеры карты:
|
1 2 3 4 |
#map{ width: 100%; height: 400px; } |
В js файле, подключенном к данной странице, делаем вызов карты в блоке с соответствующим id:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
ymaps.ready(function () { var myMap = new ymaps.Map('map', { // id блока с картой center: [55.850213, 37.526602], // центр карты zoom: 9, // коэффицент масштаба карты (широта и долгота) controls: [] }); myMap.behaviors.disable('scrollZoom'); // отключаем масштабирование скролом myMap.controls.add("zoomControl", { // из элементов карты оставляем только масштабирование ползунком position: {top: 10, left: 10} }); // добавляем метку на карту var myPlacemark = new ymaps.Placemark([55.850213, 37.526602], {}, { iconLayout: 'default#image', // обозначаем что будет использоваться пользовательское изображение iconImageHref: '/путь к картинке/img/mark.png', // указываем путь к картинке которая будет служить меткой iconImageSize: [38, 59], // указываем размер изображения iconImageOffset: [-19, -38] // обозначаем сдвиг от левого верхнего угла к точке изображения метки . }); myMap.geoObjects.add(myPlacemark) // добавляем метку на карту }); |
Обозначать сдвиг для изображения нужно чтобы при масштабировании карты положение метки не сдвигалось.