Загрузка...Добавление карты на сайт
Добавление карты на сайт
На сайте организации обычно указывается её адрес. Для удобства потенциальных клиентов, вместе с адресом располагается карта, на которой показано местонахождение организации. Можно сделать скрин карты в подходящем масштабе и создать обычное изображение. Но сайт выглядит гораздо интереснее и солиднее, если добавить на него Яндекс карты или Google maps.
У Яндекс карт есть только один недостаток — они не поддерживаются старыми браузерами. В остальном они лучше Гугла. Они содержат больше деталей, которые помогают лучше ориентироваться на карте. Из-за этого Яндекс карта загружается немного дольше, но это загрузка полезного контента. Кроме того, подключение карты делается проще. Поэтому Яндекс карты намного популярнее.
Добавление Яндекс карты
Разместить карту на своём сайте можно двумя способами: воспользоваться конструктором карт или использовать API Яндекса и написать скрипт самостоятельно. Для входа в конструктор нужен почтовый аккаунт на Яндексе. Карты, созданные в конструкторе, хуже поддерживаются браузерами, поэтому я рекомендую использовать второй способ. Он совсем несложный.
Создадим страницу и добавим на неё блок, в который будет загружаться карта. Этому блоку нужно задать атрибут id и установить размеры. По id будет определяться блок для карты.
Для использования карты нужно подключить API Яндекс карт. Это выполняет следующий код:
Добавьте этот код на созданную страницу.
Используя API Яндекса, пишем скрипт, добавляющий карту:
Поясню этот скрипт: карта создаётся внутри функции initMap() . В 20 строке функцию запускает метод ymaps.ready() . Это нужно, чтобы API загрузился до начала его использования.
Карту создаёт объект класса ymaps.Map . Нужно указать два параметра. В первом параметре указывается id блока, в который загружается карта. Второй параметр — это объект с настройками карты. Настройки такие:
center — координаты центра карты.
zoom — число от 0 до 19. Определяет масштаб карты. Чем меньше число, тем больше масштаб.
Координаты центра указываются в массиве, содержащем два элемента: широта и долгота. Чтобы здание или другой объект располагался в центре карты, нужно указать координаты этого объекта. Координаты можно узнать следующим способом.
- Открываете карту на сайте Яндекса
- Находите нужный объект
- Нажимаете на него
- Появится окно, в котором будут координаты
Укажите в скрипте координаты нужного Вам объекта, и карта готова. Она должна отображаться на странице.
Добавление метки
Важный объект на карте можно указать при помощи метки. Например, здание, в котором располагается Ваша организация. Это выглядит так:
Чтобы поставить метку, нужно создать переменную для объекта метки. Она должна быть объявлена на глобальном уровне, то есть, до функции initMap() .
Внутри функции initMap() , после создания карты нужно добавить такой код:
Скрипт работает так: создаётся объект класса ymaps.Placemark . Указывается два параметра. В первом указываем координаты метки. Второй параметр — это объект с настройками метки. Можно указать такие настройки:
hintContent — текст, появляющийся при наведении на метку
balloonContent — текст в окне, которое появляется при клике не метке
В 23 строке созданная метка добавляется на карту.У объекта карты есть метод geoObjects.add() , который добавляет на карту объекты. В нашем примере объект карты записан в переменную map . К ней применён этот метод.
Весь код скрипта, добавляющего карту с меткой, выглядит так:
Если координаты центра и метки совпадают, то можно массив с координатами записать в переменную, а не писать каждый раз. Но метку можно поставить в любом месте. Тогда координаты нужно писать отдельно.
Конструктор карт от Яндекс – инструкция о том как вставить интерактивную карту на сайт
Приветствую вас, друзья и коллеги. Недавно я рассказывал про банковские карты Яндекс Денег (хорошая штука), сегодня речь снова пойдет о сервисе от Яндекса и снова про карты, только не про пластиковые и не про игральные, а про карты местности. Рассмотрим конструктор карт от Яндекс с помощью которого можно сделать, например, схему проезда к вашему офису и повесить её на сайт. В статье приведена подробная инструкция по настройке сервиса Яндекс Карты для страницы контактов персонально сайта.
Возможность помочь клиентам добраться в нужное место – это весомый вклад в развитие бизнеса, чем больше людей дойдет куда надо, тем выше будут доходы и прибыль. Так что, если ваш бизнес как-то привязан к объектам на местности, то вставить хорошую карту на сайт надо обязательно.
Зачем нужна интерактивная карта
- Удобно для клиента – легко планируется маршрут с учетом всех актуальных изменений, так как Яндекс оперативно вносит данные о ремонтах и новых застройках на свои карты.
- Удобно владельцу сайта – все корректировки вносятся на карту автоматически, достаточно один раз вставить карту на сайт, потом обновления подгружаются из базы Яндекса сами.
- Поднимает авторитет и уровень доверия к организации. Хотя такую примочку может сделать любая шараж-монтаж контора, на подсознательном уровне сайт с интерактивной картой воспринимается лучше.
В былые времена адреса офисов, маршруты прохода и проезда, различные интересные объекты и т.д. отмечали на картинках, изображающих карту, и выкладывали на сайт обычным jpg или png файлом. Проблема была в том, что они не могли учесть временные ремонты, пробки или другие изменения местности, не имели возможности подсказать индивидуальных маршрут с разных направлений.
С развитием интернет сервисов, таких как Яндекс Карты и Google Maps, появилась возможность сделать карты живыми – интерактивными. Такие можно вертеть в разные стороны, менять масштаб, маршруты с разных точек задавать, планировать свое перемещение с учетом пробок и многое другое.
Наличие удобной схемы проезда на странице контактов в наше время является правилом хорошего тона для любой компании.
И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем вставка видео с Youtube).
Конструктор карт Яндекс
Если у вас нет аккаунта в Яндексе, то надо будет его завести, так как без этого сконструировать ничего не получится, сервис попросит вас залогиниться или пройти регистрацию. Пугаться не нужно, регистрация – это создание почтового ящика на Yandex. Даже если он вам не нужен для работы с электронной почтой, пригодится для других сервисов поисковика, например, для Яндекс Метрики или Яндекс Вебмастер.
Начинается процедура с этой странички – tech.yandex.ru/maps/tools/constructor/
Так как вы читаете эту статью, значит, вы входите первый раз и сохраненных ранее карт у вас нет, остается выбрать левую желтую кнопку “Создать новую карту”. С этого момента начинается формирование индивидуальных настроек карты на нужной местности.
Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.
Все настройки производятся в визуальном конструкторе, никакие коды править не придется, работа по адаптации мало отличается от обычного использования Яндекс карт пользователем. Начнем с добавления объектов.
Добавление объектов
Первым инструментом послужит форма поиска, которая находится в верхней части карты. С ее помощью мы можем отыскать нужную точку по адресу, координатам или названию. Вводим в поле данные запроса, пример с адресом «Москва, Красная площадь»:
После нажатия на кнопку найти на местности появится точка, соответствующая расположению заданного объекта. Вставить можно много объектов. Пример с Кремлем:
Каждую точку можно настроить так, чтобы она отличалась от других объектов и была на карте легко различима – меняется цвет и форма, а также, внутри можно добавить уникальный значок, если ткнуть в выпадающее меню «Контент». Это удобно, если объектов на создаваемой карте много и их можно классифицировать по разным группам.
Слева наполняется список всех отмеченных на карте адресов.
Изменение масштаба и положения
С помощью клавиш «+» и «-», находящихся в левой верхней части макета устанавливается оптимальный масштаб. Полная карта России не нужна, чтобы перемещаться по центру Москвы и, если вы указываете точечный объект в каком-то городе, лучше настроить масштаб на уровне, когда различимы названия улиц и окружающих домов.
Для перемещения карты в разные стороны нужно захватить ее нажатием левой кнопки мыши и двигать куда нужно.
Контуры объектов (многоугольники) и линии
При необходимости выделить очертания какого-либо элемента на карты, когда указания точкой недостаточно, используем инструмент «Многоугольники». Устанавливая одну точку за другой, мы получаем периметр, залитый внутри определенным цветом.
Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:
Начертание линий осуществляется кнопкой «Линии». Все действия аналогичны предыдущему инструменту, только пространство между точками не закрашивается. С помощью линий на Яндекс карте можно рисовать маршруты движения (прохода, проезда).
Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.
Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).
Завершаем маршрут нажатием на «Готово».
Вид карты и наложение пробок
Последний штрих, который позволяет придать карте особые свойства – это наложение пробок, для этого есть отдельная кнопка. Честно сказать, я сомневаюсь, что подобная опция будет часто востребована для карт, вставляемых на сайт, так как для движения на машине люди чаще пользуются навигаторами, чем встроенными картами.
А вот переключение режимов между схемой, спутником и гибридом может пригодиться.
Вид со спутника придает окружающим объектам их реальный облик и узнать их на такой карте проще, чем схематичные прямоугольники схемы.
Название и описание
Для того, чтобы в будущем мы могли возвращаться к созданной карте для ее корректировки или для повторного получения кода вставки надо придумать ей название и описание, после чего сохранить.
Код карты для вставки на сайт
Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:
- интерактивную карту (о которой я говорил с самого начала);
- статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
- печатную – файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.
Выбор между ними будет выведен сразу после сохранения.
В этом же меню задается итоговый размер в пикселях. Задать его можно вручную или двигая за уголки рамку вокруг выделенной области справа. Галочка «Растянуть по ширине» заставляет карту занимать все пространство на сайте упираясь в края того блока, где она выводится.
На этом этапе есть возможность вернуться к редактированию карты, в левой верхней части окна есть соответствующая надпись со стрелкой.
Итоговый код появляется после нажатия на кнопку «Получить код карты», мой выглядит вот так:
При выборе печатной карты добавится выбор формата файла – png или jpg, и кода, соответственно, не будет – кнопка скачивания вместо него появится. Такой файл тоже можно вставить на сайт, только надо будет закачивать его на хостинг и, при отсутствии визуального редактора у вашего сайта, надо будет выписать изображение в HTML теги (src)
Как вставить карту Яндекс на сайт
Код мы получили, теперь необходимо перенести его на наш веб ресурс. Для размещения подойдет любое место, главное, чтобы размеры вписывались. Если вы пользуетесь конструкторами или визуальными редакторами, то не забудьте при вставке кода переключить их в текстовых (HTML) режим. Вот так:
Карта, которую я сделал
Вот что получилось у меня после всех проведенных настроек:
Удобен сей элемент всем – и объекты нужные подсвечены и масштаб подобран как положено. Кроме того, сервис Яндекса позволяет пользователю определить свое местоположение (стрелочка в верхнем левом углу) и проложить индивидуальный маршрут в нужную точку.
Раскрыть карту на весь экран позволяет кнопка в правом верхнем углу в виде двух расходящихся в разные стороны стрелок. Теперь про плагины.
Плагины для WordPress и других CMS
Раньше делать карты было сложнее и многие пользовались для этих целей специальными плагинами, например, для WordPress был такой – Yandex Maps for WordPress. Сейчас не нужны никакие API и любой пользователь с минимальными знаниями разберется как все настроить, поэтому смысла в плагинах я не вижу. Названный выше плагин тому подтверждение – не обновляется более 2-х лет, видимо спроса нет.
Из относительно актуальных я нашел Yandex Maps API (обновлен 4 месяца назад) и Oi Yandex.Maps for WordPress (5 месяцев назад). Если у вас есть желание поиграть в плагины, то их найдете в репозитории Вордпресс поиском, а как устанавливать плагины смотрите тут.
Вы сами убедились, что подготовить карту и разместить ее на своем ресурсе получается гораздо быстрее, чем прочитать эту инструкцию, теперь каждый ваш ресурс будет радовать своих посетителей такой удобной фишкой.
Как сделать карту в конструкторе Яндекса и разместить ее на сайте
В этой статье я расскажу о том, как сделать карту в конструкторе Яндекса и разместить ее на своем сайте. Статья будет полезна преимущественно для владельцев коммерческих сайтов, ведь именно там нужна карта с указанием адреса.
Зачем это нужно
Карта может понадобиться для коммерческих сайтов. Допустим, если где-то есть офис, и надо рассказать клиентам, как к этому офису можно проехать. Карта на сайте позволит им не тратить время на поиск карты в других местах и построить маршрут прямо здесь и сейчас.
То же касается и проектов смежных направленностей: магазины, сервисы, автомастерские и т. д. Фактически карта на сайте не просто приятный бонус, это обязательный атрибут, который никак нельзя упускать из виду.
У этого есть и другое значение – если пользователь видит, что у вашей компании есть свой офис, куда можно приехать (еще лучше, если он обозначен в Яндекс и Гугл Мапс), уровень доверия к вам значительно повышается. Ваш бизнес уже не воспринимается как что-то непонятное и сомнительное.
Карта интерактивная. Это значит, что ваши клиенты смогут сориентироваться, посмотреть схему проезда, наличие условных знаков, названия улиц.
Поэтому давайте перейдем к инструкции размещения карты на сайт.
Создание карты
Для этого мы будем пользоваться специальным конструктором карт Яндекса. Его могут использовать все, но придется пройти регистрацию и завести себе аккаунт Яндекса.
Как только вы залогинитесь, можно переходить к следующей инструкции. С помощью полей ввода адреса или курсора найдите нужное место и задайте масштаб. Делайте это с умом, потому как именно таким образом и будет выглядеть карта на вашем сайте.
Вы можете поставить метки, линии, многоугольник и пробки для того, чтобы дать посетителям дополнительную информацию. Например, о том, что где-то есть удобный проход или же наоборот, что пути нет. Но обо всем этом далее.
Все созданные вами объекты будут доступны в “Списке объектов”. Их при желании можно удалить или отредактировать.
Метки
Метками можно обозначить ближайшие станции метро или автобусные остановки. Еще меткой можно обозначить вход в здание (если оно большое) или другие офисы, если они есть.
Чтобы создать метку выберите ее в панели управления сверху и кликните по любому месту на карте. После этого выскочит окно, в котором вы сможете ввести подпись метки и краткое описание – оно будет выводиться при клике. Также вы можете выбрать цвет и тип метки. Рядом доступны и другие параметры кастомизации, например иконки или произвольное число.
Как только редактирование будет завершено, кликните на кнопку “Готово”. Можно создать сколько угодно меток. Но если их будет слишком много, пользователи могут запутаться.
Линии
С помощью линий вы можете нарисовать маршрут, отметить какие-то обходные пути или показать наиболее короткую дорогу от того же метро или остановки.
Создавать линии очень просто, выберите их в панели инструментов и кликните по нужному месту.
Линия создается по точкам, как только вы кликните на определенного место, нужно переместить курсор по направлению линии и кликнуть еще раз. Как только формирование линии будет закончено, нажмите на клавишу “Esc”. После этого всплывет окно с опциями.
Вы можете выбрать цвет, процент прозрачности и толщину линии. Также можно ввести описание, которое будет доступно при клике по объекту. Кликаем на “Готово”, как только редактирование будет закончено.
Многоугольники
С помощью многоугольников вы также можете рисовать произвольные отметки на карте. Обычно этот инструмент используют для обрисовки контура здания. Им же можно обозначить какую-то территорию или любую другую местность.
Выбираем инструмент, кликаем в нужном месте, потом кликаем еще раз, как и в случае с линиями, и вот уже на третий раз вы сможете сформировать треугольник – самый простой вид многоугольников.
То есть он формируется при помощи трех точек, ничего сложного. При желании вы можете сделать больше точек, изобразив другую фигуру.
После того, как фигура сформирована, нажимаем на клавишу “Esc”. Выскочит окно с параметрами.
Можно задать цвет контура и заливки, выбрать толщину. Обратите внимание на два поля “Прозрачность”, которые расположены параллельно контуру и заливке. Здесь вы можете задать процент прозрачности.
Если выставить 100, то нужный элемент просто исчезнет. Например, вы хотите, чтобы был только контур – вводите значение 100 в поле напротив заливки и она исчезает. То же сработает и с самим контуром. Очень удобно.
Можно закрывать редактор с помощью кнопки “Готово”. Но не спешите, есть еще кое-что, о чем надо сказать.
Пробки и слои
Эти два инструмента также могут помочь при создании карты. С помощью кнопки “Пробки” вы можете включить отображение дорог, где есть пробки. Для больших городов это очень важный пункт.
Слои же отвечают за тип карты. Например, на моих скриншотах стоит стандартный рисованный вариант. Если он вам не нравится, то вы можете выбрать спутник (думаю, не надо объяснять, что это вид со спутника) и гибрид. Последний представляет собой смесь рисованного варианта и спутника (грубо говоря: спутник с отметками).
Сохранение и получение кода
После редактирования карты вы можете сохранить ее. Для этого нужно нажать на соответствующую кнопку внизу, но не забывайте ввести название и описание.
Но это еще не все. После этого конструктор предложит нам выбрать размер карты и ее тип. Есть интерактивный, когда пользователь может менять масштаб или прокручивать карту при помощи мыши, или статичный, когда он видит простую картинку в формате PNG.
С помощью боковой панели или интерактивных уголков (можно перетаскивать) выбираем размеры. С помощью курсора ее можно масштабировать. Эти функции пригодятся вам, если в предыдущем шаге вы переборщили с размером и элементы вылезли за края.
Нажимаем “Получить код карты”, после чего нам предлагается выбрать вариант кода: JavaScript или iframe.
Код на JavaScript имеет больше возможностей. Пользователи смогут менять масштаб, вид (слои), отмечать пробки и т. д. Если же вы выберете iframe, то функционал будет урезан, посетители смогут посмотреть пробки и больше ничего.
Размещение кода на сайте
Вне зависимости от выбранного варианта вам придется размещать код на сайте. Я не буду подробно рассказывать о том, как это сделать – все индивидуально и зависит от вашей платформы.
Принцип везде один – вам необходимо просто вставить код в нужном месте страницы вашего проекта. В том же WordPress это можно сделать при помощи встроенного редактора. В других CMS этот процесс тоже мало чем отличается.
В любой момент вы можете зайти в раздел “Мои карты” и изменить какие-то параметры, добавить новые метки или линии, получить другой тип кода.
Также вы можете импортировать готовую карту из форматов XLSX, CSV, KML, GPX или GeoJSON.
Заключение
Надеюсь, теперь вы понимаете, как создать свою вариацию карты и установить ее на сайт. Тут нет ничего сложного, нужно просто следовать инструкции и читать то, что написано в официальной документации. Последнее актуально в тех случаях, когда нужно изменить размеры или вставить ее в определенный контейнер. В общем-то, не сложнее, чем сделать карту в конструкторе Google Maps – все примерно так же.
Если вы хотите лучше разбираться в сайтах, а если быть точнее – в информационных проектах, то я рекомендую вам обратить внимание на курс Василия Блинова “Как создать сайт”. В нем автор рассматривает информационные сайты как способ стабильного пассивного дохода, учит правильно создавать и продвигать ресурсы в поисковых системах. Есть уроки по монетизации и написанию контента. Обязательно заглядывайте.
Подключение модуля "Яндекс.Доставка"
С помощью модуля можно рассчитать тарифы на доставку пассажирского или грузового такси в RetailCRM.
Важно! Агрегатор Яндекс.Доставка — это агрегатор доставочных сервисов. Яндекс.Доставка — отдельный сервис организации перевозок и логистики. Его можно подключать вне зависимости от использования модуля «Агрегатор Яндекс.Доставка». Для каждого продукта нужен отдельный договор.
В рамках продукта доставка «Яндекс.Доставка» поддерживается 3 тарифа:
курьер на автомобиле
фургон с грузчиком
Доступ в личный кабинет «Яндекс.Доставки» осуществляется по ссылке dostavka.yandex.ru
Если у вас нет доступа в личный кабинет, то его можно подключить по ссылке.
Для подключения модуля «Яндекс Доставка» к RetailCRM необходимо подключить аккаунт RetailCRM в систему retailcrm.services, добавить аккаунт доставки и API-ключ, настроить синхронизацию. в retailcrm.services и сделать необходимые настройки в RetailCRM. Вся настройка занимает не более 15 минут.
Последовательность действий описана ниже:
Проверка настроек API ключа
Перейдите в раздел Настройки → Интеграции → Ключи доступа API:
Выберите ключ, который использовали для авторизации в retailcrm.services и проверьте настройки:
Тип доступа. Если загрузка данных будет осуществляться в несколько магазинов, то необходимо выбрать тип доступа «Для всех магазинов».
В блоке «Разрешенные методы API» проставьте все галки для методов групп:
Заказы
Добавление аккаунта Яндекс.Доставка в retailcrm.services
1. Перейдите в раздел «Мои аккаунты»
2. В блоке «Мои аккаунты Яндекс.Доставка» нажмите кнопку «Новый аккаунт».
3. В названии аккаунта укажите произвольное название аккаунта
4. В поле токен доступа укажите токен из личного кабинета Яндекс.Доставка. Токен находится в разделе «Профиль компании» → вкладка «Создать токен», либо в разделе «Интеграции».
Настройка синхронизации
Перейдите в раздел синхронизаций модуля и нажмите кнопку «Создать новую синхронизацию»:
2. На странице создания синхронизации заполните необходимые настройки и нажмите кнопку «Сохранить»:
Настройка интеграции Яндекс.Доставка в RetailCRM
1. Переходим в маркетплейс RetailCRM вашего аккаунта в модуль «Яндекс.Доставка».
2. Переходим к основным настройкам на вкладке «Доставка». Здесь нужно выбрать необходимые настройки на вкладках «Основные» и «Способы оплаты». Каждую вкладку рассмотрим подробнее ниже.
Вкладка «Доставка»:
Поле «Стоимость доставки» позволяет выбрать два варианта:
Первый «Рассчитывается автоматически службой доставки» — в данном случае стоимость будет передаваться автоматически в систему из «Яндекс.Доставка» при выборе соответствующей доставки и сохранении заказа. Используйте данную опцию.
Второй «Задается вручную» — в таком случае стоимость доставки необходимо будет указывать вручную;
Дата последнего обновления статусов доставки — поле показывает последнее обновление статусов доставки. Если статусы не обновлялись или произошла какая либо ошибка при попытке обновиться, то в поле отобразится соответствующая ошибка. Обновление статусов происходит 1 раз в 3ч.
3. На вкладке «Способы оплаты» выберите необходимы способы оплаты:
4. Вкладка «Склады» не заполняется.
5. На вкладке «Статусы» можно задать соответствие статусов заказа RetailCRM статусам Яндекс.Доставки. В случае если задано соответствие статусов, то при изменении статуса отправления в службе доставки изменится статус заказа RetailCRM. Это будет отображено в истории заказа и полезно использовать для автоматизации обработки заказа. Логика настройки статусов описана на примере модуля «Почта России» в статье.
6. На вкладке «Значения по умолчанию» можно задать номер телефона и доп. отметку, чтобы при выборе способа доставки в заказе, указанные значения подставлялись автоматически:
7. Теперь необходимо создать новый способ доставки в справочниках «Типы доставки» и добавить интеграционную доставку:
Введите название способа доставки, символьный код и выберите значение выпадающего поля «Интегрировать с» ранее активированный модуль «Яндекс.Доставка».
Стоимость доставки на вкладке «Стоимость» оставьте ноль. Стоимость доставки рассчитывается службой доставки, этап опция уже указана ранее в настройках интеграционного модуля. Настройка условий на стоимость доставки подробно описана в документации RetailCRM. Настройка интеграции с модулем «Яндекс.Доставка» завершена!
Яндекс.Карты API. Ищем расстояние от МКАД до указанной точки.
Думаю, что жители подмосковья часто сталкивались с ситуацией, когда за курьерскую доставку отдельно просят денюшку за каждый километр от мкада. Недавно встала задача хоть немного автоматизировать подсчёт расстояния «от мкада» до указанной точки. Причём не по прямой, а по маршруту следования машины. По дорогам то бишь.
Благодаря широким возможностям Yandex.maps API это сделать достаточно просто.
Итак, задача. Показать карту, дать возможность пользователю кликнуть по какому-либо месту на карте, посчитать расстояние от мкада до этой точки.
Главная проблема тут — найти ближайшую точку мкада. Автоматизировать это можно достаточно приблизительно, но нам и не нужна точность до метра.
Сегодня: рисуем Яндекс.карту; учимся рисовать на ней полигоны и метки; ищем ближайшие точки из списка объектов; составляем маршрут и считаем дистанцию между двумя точками.
Ссылки на примеры и доки в конце статьи.
Алгоритм
1. Надо понять что такое мкад.
2. По клику определяем ближайщую точку мкада к кликнутому адресу.
3. Составляем маршрут между этими двумя точками
4. Спрашиваем длину этого маршрута.
Что такое МКАД
Решение в Песочнице даёт нам понять, что по определению Яндекса, МКАД — это фигура-полигон, составленная по точкам-координатам. Мутить с лишним json не хотелось, поэтому массив координат просто был вынесен в отдельную переменную mkad_coords в начале файла.
Строим полигон по этим координатам.
Получаем отрисованный мкад!
Ищем ближайшую точку мкада
По событию клика на карте отрисовываем на этом месте метку. Для расчётов она нам не нужна, но мы же для людей делаем =)
Пытаемся найти ближайщую точку. Курим документацию. Понимаем, что полигон — это такая одна большая точка, и найти среди координат полигона ближайшую у нас не получится.
Возвращаемся на первый шаг, вместо полигона добавляем тучу меток, среди которых и будем искать. Делаем их невидимыми, поверх этого безобразия отрисовываем таки для красоты полигон.
Вот что получится если добавить все метки видимыми. Но делать так не надо, это приводит к большим тормозам из-за количества объектов. =)
Вот теперь можно найти ближайшую точку мкада.
Маршрут
Теперь у нас есть две точки — куда кликнули и ближайшая точка мкада. Просим яндекс составить нам маршрут, по которому будем определять расстояние.
Этот метод, конечно же, очень приблизителен. Ближайшая точка мкада — это же не обязательно точка съезда. Это можно увидеть если потыкать по карте при включённой отрисовке маршрута.
