Как изменить иконку в яндекс картах
Перейти к содержимому

Как изменить иконку в яндекс картах

  • автор:

Поменять иконку при наведении на точку на яндекс карте?

У меня есть точка на яндекс карте , как поменять иконку при наведении?

  • Вопрос задан более трёх лет назад
  • 2070 просмотров

Комментировать
Решения вопроса 1

deepblack

Ответ написан более трёх лет назад

bogdan19930903

Богдан Глушко @bogdan19930903 Автор вопроса
Да, это работает, но есть одна проблема iconContent отображается только после наведения на точку

deepblack

Да, это работает, но есть одна проблема iconContent отображается только после наведения на точку

Как это относится к вопросу?

как поменять иконку при наведении?

bogdan19930903

Богдан Глушко @bogdan19930903 Автор вопроса

Андрей,
Это относится так что мне нужно чтобы
iconContent: ‘0,62 Га 15230 мВІ’, выводилось до наведения на иконку курсора, как у меня работало до этого только, чтобы эконки менялись при наведении

deepblack

Богдан Глушко,
Я вам уже добавил iconContent,
Смотрите внимательно исходник.

bogdan19930903

Богдан Глушко @bogdan19930903 Автор вопроса
Андрей, Спасибо Вы мне очень помогли,
A если мне нужно назначит onclick?

deepblack

если мне нужно назначит onclick?

Всё точно так-же:

myPlacemark.events.add('click', function () < alert('О, событие!'); >);

Спасибо Вы мне очень помогли,

Для спасибо есть кнопка «отметить решением», ответ на вопрос тоже отметьте.

bogdan19930903

Богдан Глушко @bogdan19930903 Автор вопроса

Андрей, раз уж мы свами так хорошо общаемся, можете мне объяснить принцып перемещения объектов с базы на карту?

deepblack

Богдан Глушко, в самом простом случае в бд хранятся координаты в виде строки «55.755773, 37.617761»
далее получаем список координат обычным SELECT запросом, подставляем их в шаблон в цикле или без, если это одна метка.
в Django я делаю это так:

spoiler

5d5207db3f2e6190501236.png

для JS нужно использовать свой шаблонизатор или или плагин (модуль) для React или Vue.js (тут уж что вы используете).
Еще можно для хранения и отдачи меток использовать API, т.е. сначала показывать пустую карту, и динамически подгружать GeoJSON с точкими и полигонами.

В идеале координаты и тип (Point, Polygon и т.д) лучше хранить в PostGIS — это такое расширение для Postgresql, с очень большими возможностями, например дает возможность при запросе ограничивать область координат откуда брать метки, + можно будет хранить не только точки (Point) а еще и различные сложные фигуры.

Добавляем свои иконки на карту яндекс

Иногда требуется запилить яндекс карту, но не совсем обычную, а с какими-нибудь «своими» красивыми иконками. Для этого требуется подключить карту не конструктором, а с помощью API яндекс карт. Кстати версий яндекс карт существует несколько. Я буду рассматривать API 2.1 — самую последнюю.

Шаг первый, подключим карту.

В шапке страницы, между тегами пропишем подключение API:

Шаг второй, выведем заготовку, пустую карту в специальный блок:

В теле документа добавим блок для карты. А ниже футера, перед закрывающим тегом вставим наш скрипт:

   ymaps.ready(init); // когда апи готово, инициализируемя карту var customMap; // объявим переменную для карты function init () < // функция инициализации customMap = new ymaps.Map("customMap", < // создадим карту выведем ее в див с center: [55.76, 37.64], // центра карты behaviors: ['default', 'scrollZoom'], // скролл мышью zoom: 10, // масштаб карты controls: ["zoomControl", "fullscreenControl"] >); >  

В принципе, все должно быть понятно, я описал в комментариях к коду очень подробно.

Шаг третий. Модифицируем наш скрипт — выведем стилизованную метку.

Заодно у нас стилизованы балуны. Если стилизация балуна не требуется, ее можно просто убрать из кода.

Что такое балун? Балун — это описание метки, появляющееся при нажатии на иконку метки.

Полностью получившийся код страницы, чтобы не возникало лишних вопросов:

      html,body #customMap .customMapClose Яндекс карты   ymaps.ready(init); // когда апи готово, инициализируемя карту var customMap; // объявим переменную для карты function init () < // функция инициализации customMap = new ymaps.Map("customMap", < // создадим карту выведем ее в див с center: [55.76, 37.64], // центра карты behaviors: ['default', 'scrollZoom'], // скроллинг колесом zoom: 10, // масштаб карты controls: ["zoomControl", "fullscreenControl"] // элементы управления >); customPlacemark0 = new ymaps.Placemark([55.752577,37.632134], < // Создаем метку с координатами точки balloonContent: '
Заголовок метки

Описание метки.

X ' // содержимое балуна в формате html, все стили в css >, < iconLayout: 'default#image', iconImageHref: 'img/ico.png', // картинка иконки iconImageSize: [36, 36], // размер иконки в пикселях iconImageOffset: [-18, -36], // позиция иконки в пикселях(считается от верхнего левого угла) balloonContentSize: [270, 99], // размер нашего кастомного балуна в пикселях balloonLayout: "default#imageWithContent", // указываем что содержимое балуна - стилизовано balloonImageHref: 'img/baloon.jpg', // Картинка бэкграунд балуна balloonImageOffset: [-36, -90], // смещание балуна, его необходимо подогнать balloonImageSize: [270, 90], // размер картинки-бэкграунда балуна balloonShadow: true >); // Добавляем метки на карту customMap.geoObjects.add(customPlacemark0); >

Картинки для иконки и балуна, положим в директорию img, рядом со страничкой. Таких меток можно выводить сколько угодно — просто копируем код, отвечающий за метку и добавление метки на карту. Но не забываем менять название переменной для метки, например customPlacemark0, customPlacemark1 , итд.

Иконки метки можно тоже делать абсолютно разные (но не забудьте позиционировать иконку, в соответствии с ее размером).

Как изменить иконку на Яндекс картах с помощью HTML?

Здравствуйте! Мой сат сделан на Tilda вот раздел «смотреть» при добавлении блока «контакты» у меня стоит стандартная иконка (отметка на карте). Подскажите пожалуйста как заменить иконку в Яндекс картах с помощью HTML кода? Возможно ли вставить какой-то код HTML на страницу, что-бы изменилась иконка?

  • Вопрос задан более трёх лет назад
  • 1598 просмотров

7 комментариев

Средний 7 комментариев

Как изменить иконку маркера в Яндекс картах

Для изменения стандартных элементов карты, а так же для реализации множества других задач связаных с Яндекс-картами и геопозиционированием, понадобится использование специального API. В этом материале мы попробуем решить достаточно простую, но распространенную задачу: поменяем стандартную картинку маркера.

Навигация по статье:

  1. Получение API-ключа
  2. Вывод карты
  3. Замена маркера
  4. Функция для добавления нескольких адресов на карту
    1. Меняем демонстрационный скрипт
    2. Определение координат для Яндекс Карты

    Получение API-ключа

    Чтобы использовать API Яндекс.Карт нам понадобится свой ключ, который любезно предоставит Яндекс после регистрации по этой ссылке. После регистрации нам будет доступно подключение различных API Яндекса. Из всего перечня нас интересует JavaScriptAPI и HTTP Геокодер. Откроется форма, где нам предложат ответить на «несколько вопросов»: ввести контактные данные, а так же ссылку на сайт, где будет использоваться API.

    окно регистрации API

    Далее, создайте новый ключ.

    создание нового ключа

    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 карт и замене маркера вы можете по ссылке на офф.инструкцию.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *