Как изменить иконку маркера в Яндекс картах
Для изменения стандартных элементов карты, а так же для реализации множества других задач связаных с Яндекс-картами и геопозиционированием, понадобится использование специального API. В этом материале мы попробуем решить достаточно простую, но распространенную задачу: поменяем стандартную картинку маркера.
Навигация по статье:
- Получение API-ключа
- Вывод карты
- Замена маркера
- Функция для добавления нескольких адресов на карту
- Меняем демонстрационный скрипт
- Определение координат для Яндекс Карты
Получение API-ключа
Чтобы использовать API Яндекс.Карт нам понадобится свой ключ, который любезно предоставит Яндекс после регистрации по этой ссылке. После регистрации нам будет доступно подключение различных API Яндекса. Из всего перечня нас интересует JavaScriptAPI и HTTP Геокодер. Откроется форма, где нам предложат ответить на «несколько вопросов»: ввести контактные данные, а так же ссылку на сайт, где будет использоваться API.
Далее, создайте новый ключ.
И вот перед нами заветные цифры.
Вывод карты
Ключ у нас есть и теперь мы можем заняться выводом карты. Для этого вставим полученные цифры в данную строчку:
Полученный код необходимо разместить в head вашего сайта.
Вы так же можете использовать данный ключ, если работаете на локальном сервере. Ознакомиться с ограничениями вы можете здесь.
Далее, определим контейнер для вывода карты в теле сайта. В нашем случае это будет div c :
У себя я так же инлайново добавлю стили, чтобы карта растянулась по высоте, так как работаю с пустым тестовым документом (если вы работаете над реальным проектом, то, возможно, блок, в который вы поместите карту уже будет иметь высоту). Но, если что, вот стили:
html, body, #mapЗатем создадим и подключим к странице 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( '$[properties.iconContent]' ), 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( '$[properties.iconContent]' ); 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 карт и замене маркера вы можете по ссылке на офф.инструкцию.
Как изменить иконку на Яндекс картах с помощью HTML?
Здравствуйте! Мой сат сделан на Tilda вот раздел «смотреть» при добавлении блока «контакты» у меня стоит стандартная иконка (отметка на карте). Подскажите пожалуйста как заменить иконку в Яндекс картах с помощью HTML кода? Возможно ли вставить какой-то код HTML на страницу, что-бы изменилась иконка?
- Вопрос задан более трёх лет назад
- 1595 просмотров
7 комментариев
Средний 7 комментариев
Добавляем свои иконки на карту яндекс
Иногда требуется запилить яндекс карту, но не совсем обычную, а с какими-нибудь «своими» красивыми иконками. Для этого требуется подключить карту не конструктором, а с помощью API яндекс карт. Кстати версий яндекс карт существует несколько. Я буду рассматривать API 2.1 — самую последнюю.
Шаг первый, подключим карту.
В шапке страницы, между тегами пропишем подключение API:
Шаг второй, выведем заготовку, пустую карту в специальный блок:
В теле документа добавим блок для карты. А ниже футера, перед закрывающим тегом