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

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

  • автор:

Несколько точек Яндекс карты?

Задача состоит в том что должна быть яндекса карта с не ограниченным количеством точек и при клике должно выходить описание с адресом а так же кастомная метка. Я это все реализовал для одной точки с помощью этой статьи Ссылка 1

Метку кастомизировал, описание вывел по клику. Теперь проблема когда я пытаюсь добавлять множество точек то кастомная метка работает только на ту, что я сделал но описание не выходит у других. Это я пытался интегрировать с помощью этой статьи Ссылка 2

Мой Код для одной метки выглядит сейчас вот так:

ymaps.ready(init); var myMap; function init() < myMap = new ymaps.Map("YMapsID", < center: [43.238253, 76.945465], // Координаты объекта zoom: 13, // Маштаб карты controls: [] // Отключаем элементы управления. >); // Добавим на карту ползунок масштаба и линейку. myMap.controls.add( new ymaps.control.ZoomControl() ); // Отключаем zoom на скролле мыши myMap.behaviors.disable('scrollZoom'); myPlacemark = new ymaps.Placemark([43.238253, 76.945465], < // Координаты метки объекта balloonContent: "
Алматы
Название филиала

Богенбай батыра, 172 2 этаж, офис 72 вход с Желтоксан

+7 777 727 35 63
+7 777 727 35 63
+7 777 727 35 63

" // Надпись метки >, < iconLayout: 'default#image', // Своё изображение иконки метки iconImageHref: "%=static=%img/general/ic-map-marker.svg", // Размер мкетки iconImageSize: [40, 50], // Смещение левого верхнего угла иконки относительно // её "ножки" (точки привязки). iconImageOffset: [-20, -25] >); myMap.geoObjects.add(myPlacemark); //myPlacemark.balloon.open(); >;

Как сюда интегрировать код из второй статьи чтобы все метки были кастомизированные + выходило у каждого описание.
Для дальнейшей передачи на бэк энд.

Вот демо с несколькими метками Тык

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

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

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

Как добавить множество меток на яндекс карту?

Здравствуйте. Вторые сутки бьюсь над казалось бы простейшим вопросом. Я хочу на яндекс карте отображать собственные метки. Но у этих меток я хочу задать собственный html (банально, картинку вставить в баллун, кнопку подробнее).
В песочнице яндекса есть https://tech.yandex.ru/maps/jsbox/2.1/object_manager возможность создавать множество меток.
И там же есть https://tech.yandex.ru/maps/jsbox/2.1/balloon_html добавление метки с собственным хтмл. Но в этом примере можно добавить только одну метку, которая сразу же открыта на весь экран. А если я пытаюсь добавить хтмл в пример с множественными метками — они ломают карту.

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

1 комментарий

Простой 1 комментарий

Как поставить несколько меток на «Яндекс.Карту» через API?

В одной из статей уже подробно расписал, как добавить «Яндекс.Карту» на свой сайт. В этой же статье я хотел бы показать простой способ добавления нескольких меток на вашу карту через API.

Итак, всю установку и тонкую настройку я упущу (ведь для этого уже есть отдельная статья) и начну сразу с технической части.

Код JavaScript, который вы используете для настройки отображения вашей метки, вы полностью заменяете на этот:

   

Как вы поняли, в восьмой строке идет простое перечисление координат каждой метки (заменяете на свои), а в одиннадцатой– координаты видимой области.

Если вы расставляете в качестве меток, например, города, то в таком случае логичнее всего в качестве видимой области задать всю карту России.

Удачи вам! А если вдруг возникают трудности – пишите об этом в комментариях.

Как добавить точку на Яндекс.Карты

Используя сервис «Яндекс.Карты», вы можете создать интерактивную карту для своего сайта и поставить на ней несколько точек с индивидуальной информацией в каждой точке. Вы можете разместить точки на Яндекс.Карте бесплатно.

Видео: как отметить точки на Яндекс.Карте

Для работы с конструктором у вас должен быть предварительно создан аккаунт на Yandex.ru, который позволит добавлять и хранить карты в профиле для дальнейшей корректировки, и добавить на карту метку по клику.

Как создать новую карту и добавить объект на Яндекс.Карту бесплатно

Авторизуйтесь в сервисе «Яндекс» и перейдите в конструктор по адресу:
https://tech.yandex.ru/maps/tools/constructor/

Во всплывающем окне нажмите — «Создать карту».

UralCMS: Создание новой карты

Далее, чтобы создать точку и добавить здание на Яндекс.Картах (разместить адрес на карте), в строке поиска введите адрес местоположения вашей организации — и нажмите кнопку «Найти».

UralCMS: Создание новой карты

Далее, чтобы добавить местоположение в Яндекс.Картах, используйте встроенные инструменты для подготовки изображения:

  • измените масштаб
  • в форме описания, добавьте название, адрес и контактную информацию компании
  • измените цвет и тип маркера при необходимости

После внесения изменений, нажмите кнопку «Готово», чтобы добавить метку вашей организации на Яндекс.Карту.

UralCMS: Создание новой карты

Установка нескольких точек на карте

После внесения информации в описание, при необходимости вы можете добавить несколько меток на Яндекс.Карте. Для этого, перейдите во вкладку «Метки», и приступайте к установке точек в необходимых местах, путём нажатия левой клавиши мыши. Напомним, что вы можете добавить точку, или несколько, на карту Яндекс бесплатно.

Примечание: для каждой точки можно установить описание, цвет и тип для их различия.

UralCMS: Установка нескольких меток на карте

Когда вы завершите нанесение точек на Яндекс.Карту, нажмите «Сохранить и продолжить».

Настройка размера карты

На данном этапе вам необходимо указать размер интерактивной карты, которая будет отображаться в разделе с контактной информацией.

Вы можете указать любую ширину карты в пикселях или процентах, для того, чтобы изображение выводилось в аккуратном виде, по всей ширине содержимого раздела, следует установить галочку «Растянуть по ширине», а высоту при этом рекомендуем указать в пределах 300-350 пикселях.

UralCMS: Настройка размера карты

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

Размещение карты на странице сайта

После окончания создания и редактирования карты, получите её код для дальнейшего размещения на сайте.

Для этого, нажмите на кнопку «JavaScript».

UralCMS: Размещение карты на странице сайта

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

Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.

UralCMS: Размещение карты на странице сайта

Во всплывающем окне, необходимо разместить полученный код.

UralCMS: Размещение карты на странице сайта

Вставьте код в конец содержимого (место размещения указано для примера — вы можете выбрать любое подходящее место в структуре страницы). Нажмите кнопку «Обновить».

После проделанных действий, нажмите кнопку «Сохранить», и проверьте вывод карты на сайте.

Теперь вы знаете, как ставить точки в Яндекс.Картах.

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

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