Использование API Яндекс.Карт
Для изменения стандартных элементов карты, а так же для реализации множества других задач связаных с Яндекс-картами и геопозиционированием, понадобится использование специального API. В этом материале мы попробуем решить достаточно простую, но распространенную задачу: поменяем стандартную картинку маркера.
Навигация по статье:
Получение API-ключа
Чтобы использовать API Яндекс.Карт нам понадобится свой ключ, который любезно предоставит Яндекс после регистрации по этой ссылке. После регистрации нам будет доступно подключение различных API Яндекса. Из всего перечня нас интересует JavaScriptAPI и HTTP Геокодер. Откроется форма, где нам предложат ответить на "несколько вопросов": ввести контактные данные, а так же ссылку на сайт, где будет использоваться API.
Далее, создайте новый ключ.
И вот перед нами заветные цифры.
Вывод карты
Ключ у нас есть и теперь мы можем заняться выводом карты. Для этого вставим полученные цифры в данную строчку:
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<вставить_ваш_API_ключ_сюда>" type="text/javascript"></script>
Полученный код необходимо разместить в head вашего сайта.
Вы так же можете использовать данный ключ, если работаете на локальном сервере. Ознакомиться с ограничениями вы можете здесь.
Далее, определим контейнер для вывода карты в теле сайта. В нашем случае это будет div c id="map":
<div id="map"></div>
У себя я так же инлайново добавлю стили, чтобы карта растянулась по высоте, так как работаю с пустым тестовым документом (если вы работаете над реальным проектом, то, возможно, блок, в который вы поместите карту уже будет иметь высоту). Но, если что, вот стили:
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
Затем создадим и подключим к странице js файл, в котором будем задавать координаты, а так же другие параметры карты (сейчас в карту просто нечего помещать, поэтому она не отобразится).
Я создам файл по аналогии с тем, что предлагает сам Яндекс, а именно icon_customImage.js со следующим содержимым:
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.751574, 37.573856],
zoom: 9
}, {
searchControlProvider: 'yandex#search'
}),
// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
),
myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
hintContent: 'Собственный значок метки',
balloonContent: 'Это красивая метка'
}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: 'images/myIcon.gif',
// Размеры метки.
iconImageSize: [30, 42],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-5, -38]
}),
myPlacemarkWithContent = new ymaps.Placemark([55.661574, 37.573856], {
hintContent: 'Собственный значок метки с контентом',
balloonContent: 'А эта — новогодняя',
iconContent: '12'
}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#imageWithContent',
// Своё изображение иконки метки.
iconImageHref: 'images/ball.png',
// Размеры метки.
iconImageSize: [48, 48],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-24, -24],
// Смещение слоя с содержимым относительно слоя с картинкой.
iconContentOffset: [15, 15],
// Макет содержимого.
iconContentLayout: MyIconContentLayout
});
myMap.geoObjects
.add(myPlacemark)
.add(myPlacemarkWithContent);
});
Теперь, если мы обновим страницу, то увидим карту без маркеров. Уже кое-что.
Замена маркера
Данный демонстрационный файл уже настроен на добавление двух маркеров с разными иконками, но, поскольку у нас нет этих иконок, они не отображаются на карте. Чтобы это исправить, добавим для маркеров свои иконки. Я буду использовать иконки из Witcher 3, которые нарисовал для урока :)
// Своё изображение иконки метки.
iconImageHref: 'witcher-marker.svg', // Адрес до картинки
// Размеры метки.
iconImageSize: [60, 84],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-5, -38]
Аналогично можно задать иконку и для второй демонстрационной метки. Вот, собственно, и все, что касается замены маркера. По аналогии вы можете создать собственные метки с уникальными маркерами. Дальше мы рассмотрим один из способов простого добавления своих меток.
Функция для добавления нескольких адресов на карту
Меняем демонстрационный скрипт
Для того, чтобы удобно добавлять метки на карту, я написал следующую функцию:
ymaps.ready(function () {
// Поиск координатов: https://yandex.ru/map-constructor/location-tool/
var myMap = new ymaps.Map('map', {
// Задаем центр карты
center: [59.94267813289089,30.316415999999972],
// И масштаб
zoom: 15
}, {
searchControlProvider: 'yandex#search'
}),
// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
);
var createPlacemark = function(markerId, coord_1, coord_2, markerImage, name, addr) {
markerId = new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [+coord_1, +coord_2]
},
properties: {
hintContent: name,
balloonContent: addr
}
}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: markerImage,
// Размеры метки.
iconImageSize: [46, 46],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-5, -38]
});
myMap.geoObjects.add(markerId);
};
// Добавление маркеров на карту
createPlacemark('myPlacemark_1', '59.94267813289089', '30.316415999999972', 'witcher-power-place.svg', 'Место силы', 'Санкт-Петербург, Эрмитажная пристань ');
createPlacemark('myPlacemark_2', '59.93545363045839', '30.326887343994116', 'witcher-marker.svg', 'Квест 1', 'Вход в метро');
createPlacemark('myPlacemark_3', '59.93598684451666', '30.314752621881883', 'witcher-marker.svg', 'Квест 2', 'Вход в метро');
});
Вызывая функцию с необходимыми параметрами, мы создаем метки на карте. Как видите, можно задать разные иконки для каждой метки. Центр карты, а так же масштаб задаются в начале файла (помечено комментариями).
Определение координат для Яндекс Карты
Координаты для меток можно брать отсюда. Все просто: ищите адрес или объект на карте и забираете себе координаты этого места (координаты отображаются в правом нижнем углу). Там же можно определить координаты центра карты и масштаб.
Заключение
Подробнее узнать о Яндекс.API и, в частности, об API карт и замене маркера вы можете по ссылке на офф.инструкцию.