Яндекс карты несколько меток

Яндекс карты несколько меток

Прямой эфир

antonfix 10 апреля 2020, 14:21

1px 9 апреля 2020, 19:58

simha1977 3 апреля 2020, 11:01

Advanced 29 марта 2020, 19:09

googa 26 марта 2020, 17:51

Pathologic 24 марта 2020, 11:20

alexbeep 23 марта 2020, 15:04

Инфо о авторе топика

Топики пользователя

Tips & tricks

Категории

Подразделы блога

Блоги

  • Готовые дополнения для MODX148
  • Проект MODX.im50
  • Оформления для frontend’a и backend’a41
  • Для модераторов13
  • Интегрированные среды разработки (IDE)13
  • MODX custom by Dmi3yy51
  • bid-cart24
  • Социальная сеть12
  • MODX Cloud8
  • Юмор10
  • Краундфандинг2
  • Быстрые решения102
  • В разработке47
  • Вопросы768
  • Обьявления о работе282
  • Безопасность81
  • Новости70
  • Tips & tricks89
  • Сайты на MODX46
  • Форки MODX26
  • Документация и уроки63
  • Эксперименты и исследования59
  • evoShop3

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

Шаг 1

Подключаем API Яндекса между тэгами .

Шаг 2

В самом шаблоне сайта, в выводимой области вставляем вывод карты:

Шаг 3

Сам код с метками. Выкладываю на своём примере, надо было по Москве 3 метки гостиниц поставить со своим дизайном:

Пример карты можно посмотреть тут www.project-i.ru/contacts.html

Огромное спасибо за наставления 118RUS и webber

  • RAPHost
  • 26 июня 2014, 15:02 7
    0 0 0

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

Вот код с рабочего проекта, с использованием кластера, если кластер не нужен то объекты сразу засовываем в myMap.

Если разобраться не получится, пишите…

Пока разбирался с этими картами чуть не посидел

  • 118RUS
  • 26 июня 2014, 16:18
  • +1
Читайте также:  Сферический рассеиватель для вспышек

  • 118RUS
  • 26 июня 2014, 16:19

  • RAPHost
  • 26 июня 2014, 16:20

Вроде вот так должно сработать (не проверял)

Автоматическое добавление на карту любых точек по адресу (Филиалы, дилеры, офисы по стране).

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

Удалось набросать отличное, полностью автоматизированное решение, которое добавляет офис на карту, оперируя лишь адресом офиса.

Ситуация довольно распространенная, потому думаю будет не лишним поделиться опытом.

Дано:
Каталог Дилеры в дереве ресурсов, внутри страницы-ресурсы. Каждая страница — это отдельный офис.
Заполняем адреса офисов в отведенном для этого поле. Я возьму для этого description, но без проблем можно взять и TV.

Адрес может быть написан в любом формате, чем подробнее, тем лучше. Например г. Москва, ул. Ак. Королева 12.

Как разместить стандартную Яндекс карту на сайте, думаю все знают.

  1. Убедимся, что подключен Jquery — актуальной версии
  2. Подключаем скрипт карты
  3. Размещаем контейнер карты

Следующий этап — настроем получение координат по адресу. В этом нам поможет сервис геокодирования Яндекс карт. Мы делаем HTTP запрос сервису, передавая ему произвольную строку с адресом — он возвращает массив данных, среди которых в том числе есть и координаты для карты.

Хотите посмотреть как он работает? Нет ничего проще.
Перейдите по ссылке
Пример ссылки

По умолчанию данные возвращаются в XML формате.
Мне привычнее работать с JSON, поэтому я прошу сервис отдать мне JSON массив.
Следующий вопрос — каким образом провести HTTP запрос к сервису?
Опытные разработчики на этом месте улыбнутся, но не для всех это очевидно.
Для HTTP запросов используем программу cURL, которая позволяет обращаться к любому серверу и забирать данные.

Читайте также:  Отметьте все правильные утверждения о беспроводных мышках

Выглядит это так.

Автоматизируем наш пример и получаем координаты конкретных адресов, которые уже есть у нас в админке

Сохраняем сниппет getDillesCoords, который должен вернуть нам примерно следующий JSON массив.

Остается вызвать карту и передать в нее содержимое сниппета.
Пишем JS скрипт рядом с нашим контейнером #map

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

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

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

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

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

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

Далее, в строке поиска, введите адрес местоположения вашей компании, и нажмите кнопку — «Найти».

Используйте встроенные инструменты для подготовки карты:

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

После внесения изменений, нажмите кнопку «Готово»

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

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

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

По завершению всех меток, нажмите «Сохранить и продолжить».

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

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

Читайте также:  Исчезновение отзывы о фильме

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

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

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

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

Для этого, нажмите на кнопку «Получить код карты».

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

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

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

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

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

Ссылка на основную публикацию
Шум в радиаторах отопления как устранить
Отопительная система конструктивно очень сложна, а от ее функционирования зависит уровень комфорта всех жильцов дома. Когда монтажом отопления занимаются профессионалы,...
Что значит код ошибки 805а8011
Многие владельцы смартфонов с операционной системой Windows Phone не могут войти в учетную запись магазина Marketplace. На экране появляется код...
Что значит интегрированный процессор
Здравствуйте, уважаемые пользователи и любители компьютерного железа. Сегодня порассуждаем на тему, что такое интегрированная графика в процессоре, зачем она вообще...
Шутеры по локальной сети на андроид
Перемещайтесь по многочисленным картам игры и уничтожайте врагов с помощью различного оружия. v4.2 + Мод: много денег Великолепная аркада с...
Adblock detector