Создание карты со своим изображением метки через 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>
Добавление нескольких меток
Тут все почти аналогично, рассмотрите на примере:
<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: 7,
controls: []
});
var myGeoObjects = [];
// Метка 1
myGeoObjects[0] = new ymaps.Placemark([55.800151390638646,37.61400201562497],{
balloonContentBody: 'Текст в балуне',
},{
iconLayout: 'default#image',
iconImageHref: 'assets/img/address.png',
iconImageSize: [70, 70],
iconImageOffset: [-35, -35]
});
// Метка 2
myGeoObjects[1] = new ymaps.Placemark([56.800151390638646,38.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>
Тут всё просто, пример работает на ура. Если есть вопросы, задавайте.
Широту и долготу можно посмотреть на официальном сайте Яндекса, перейти .
Оставить комментарий