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

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

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

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

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

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

Как заменить иконку на свою в Яндекс картах блоков CN401-403 в Tilda

Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.

Связаться с нами
Задать вопрос
Купить шаблон

Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)

Заказать установку примера

Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.

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

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

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

Получение API-ключа
Вывод карты
Замена маркера
Функция для добавления нескольких адресов на карту
1. Меняем демонстрационный скрипт
2. Определение координат для Яндекс Карты
Получение 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 карт и замене маркера вы можете по ссылке на офф.инструкцию.

Как изменить значок маркера в Yandex maps?

Нужно сделать, что бы вместо оригинального значка маркера был тот, что я пришил к посту. В настройках модуля загрузки нет, через ксс пробовал менять, сработало, но криво, ибо вёрстка сделана под иконку с хвостиком у маркера справа как в оригинале, а не по середине как у меня(у моего варианта хвостик скрыт и я не знаю как его выковырять).

Вложение Размер

111.png 2.37 КБ
- Drupal7
- Решение проблем
- Блог
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Комментарии

Apuox 27 мая 2015 в 15:26

Чтобы получить доступ к маркеру и другим функциям необходимо создать карту программно. Для начала необходимо подключить сам скрипт карт:

Далее создаем карту по параметрам описанным ниже (более подробно описанные примеры и информацию можно найти здесь https://tech.yandex.ru/maps/jsbox/2.1/ ):

ymaps. ready ( init ) ;
function init ( ) <
var myMap3 = new ymaps. Map ( «map3» , <
center : [ 55.77127434 , 37.63492426 ] ,
zoom : 17 ,
controls : [ «zoomControl» ]
> ) ;

myMap3. controls . add ( ‘fullscreenControl’ , < float : 'left' >) ;
// Создаем геообъект с типом геометрии «Точка».
myGeoObject = new ymaps. GeoObject ( ) ;
myMap3. geoObjects
. add ( new ymaps. Placemark ( [ 55.77101400 , 37.63209300 ] , <
balloonContent : ‘Ул. Уличная,д. 22’
> , <
// Опции.
// Необходимо указать данный тип макета.
iconLayout : ‘default#image’ ,
// Своё изображение иконки метки.
iconImageHref : ‘/images/map_icon.png’ ,
// Размеры метки.
iconImageSize : [ 203 , 254 ] ,
// Смещение левого верхнего угла иконки относительно
// её «ножки» (точки привязки).
iconImageOffset : [ — 80 , — 254 ]
> ) ) ;

Центр карты можно найти как из url на яндекс карте (там просто много чисел, и можно сразу не разобраться), так и сторонним способом, например: http://webmap-blog.ru/tools/getlonglat-ymap2.html

В функции init(), есть строка вида:

var myMap3 = new ymaps. Map ( «map3» , <
где «map3», указатель на блок вида:

Соответственно по вышеуказанным параметрам скрипта можно сформировать:
— позицию центра карты, и отдельно позицию маркера (в случае когда он должен быть не по центру, и смещен, в углу например)
— кастомный маркер (необходимо указать его размер, можно настоящий а можно и смашстабированный + смещение относительно точки, предполагая, что маркер расположен справа внизу от указанной точки маркера)
— так же необходимо указать/подобрать необходимый масштаб карты
— можно добавить необходимые виджеты (фулскрин, линейку и т.п.)

upd: в последствии блоку map3 необходимо задать высоту+ширину, дабы его было видно.
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
- Реакции
VVS 22 июня 2017 в 12:46

В коде пропущено закрытие >;
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
- Реакции
Кришпер 26 июня 2015 в 10:52

Пожалуй, выложу пример для работы с модулем. В общем, после установки яндекс модуля и появления поля для выбора позиции карты, нужно переопределить шаблон типа материала, где нужна карта, и прописать следующий код

//
$bb = $node;
//
$bb1 = $bb-> field_of_map[‘und’][0][‘placemarks’] ;
$bb5 = $bb->field_of_map[‘und’][0][‘placemarks’] ;
//
$bb2 = json_decode($bb1)[0]->params;
//
//print_r( json_decode($bb1)[1]->coords );
$bb1 = json_decode($bb1)[0]->coords;

//
$bb = $bb->field_of_map[‘und’][0][‘coords’];
$bb = json_decode($bb);
?>

function init() <
myMap = new ymaps.Map(«map», center: [ center[0]; ?>, center[1]; ?>] center; ?>,
zoom: zoom; ?>
>);
$arrY = » ;
// json_decode ( $bb1 ) [ 0 ] -> coords;
foreach( json_decode($bb5) as $key => $e ) <
$e1 = $e->coords;
$e2 = $e->params->iconContent; //[params] => stdClass Object ( [color] => white [iconContent]
$arrY .= ‘.add(new ymaps.Placemark([‘.$e1[0].’,’.$e1[1].’], ‘hintContent: «‘.$e2.'»‘.
‘>, ‘iconLayout: «default#image»,’.
‘iconImageHref:»‘.$base_url.’/themes/bartik/images/ikon_yand.png’.'»,’.
‘iconImageSize: [135, 79],’.
‘iconImageOffset: [-62, -79]’.
‘>))’;
>
print ‘myMap.geoObjects’.$arrY.’;’;
?>
>
< / script >
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
- Реакции
Похожие публикации: