Все для создания и продвижения сайтов

Верстка, программирование, SEO

Создание карты со своим изображением метки через API Яндекса

количество просмотров 1582
Создание карты со своим изображением метки через API Яндекса

Рассмотрим, как добавить метку на картах яндекса, при этом в качестве метки мы будем выводить своё изображение. Данный скрипт построен на API 2.1 Яндекс Карт.

Пример результата:

Создаём свою метку

Подключаем скрипт API Яндекс Карт 2.1 и выводим наш скрипт.


<div id="map" style="width: 100%; height: 400px"></div>

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
        // Центр карты, указываем коордианты
        center:[55.752161956105276,37.61949517968746],
        // Масштаб, тут все просто
        zoom: 9,
        // Отключаем все элементы управления
        controls: []
    }); 
            
    var myGeoObjects = [];
    
    // Наша метка, указываем коордианты
    myGeoObjects = new ymaps.Placemark([55.800151390638646,37.61400201562497],{
                    balloonContentBody: 'Текст в балуне',
                    },{
                    iconLayout: 'default#image',
                    // Путь до нашей картинки
                    iconImageHref: 'assets/img/address.png', 
                    // Размер по ширине и высоте
                    iconImageSize: [70, 70],
                    // Смещение левого верхнего угла иконки относительно
                    // её «ножки» (точки привязки).
                    iconImageOffset: [-35, -35]
    });
                
    var clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom: false,
        clusterOpenBalloonOnClick: false,
    });
    
    clusterer.add(myGeoObjects);
    myMap.geoObjects.add(clusterer);
    // Отлючаем возможность изменения масштаба
    myMap.behaviors.disable('scrollZoom');

}
</script>    

Тут всё просто, пример работает на ура. Если есть вопросы, задавайте.

Широту и долготу можно посмотреть на официальном сайте Яндекса, перейти .

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.