Как установить карту местности на сайт?

Яндекс.Карты — это сервис, который предоставляет  пользователям  карты  городов России  и других стран СНГ, а также возможность построения маршрутов автомобильных дорог, собственных карт, данные о пробках и многое другое.

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

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

Корпоративные сайты Карты помогают упростить поиск организации клиентами и партнёрами. Достаточно создать понятную карту расположения офисов или схему проезда. Тематические порталы и Электронные СМИ Размещение на сайте информации, интересной пользователям: организации города, объявления о продаже и аренде недвижимости, маршруты общественного транспорта, происшествия на дороге. Поиск можно осуществлять с учетом географии. Если отмечать места событий на карте, то пользователи могут узнать, что интересного происходило рядом сними или в любом другом выбранном ими районе. Интернет-магазины Размещение сведений на сайте о расположении точек самовывоза или демонстрационных салонов. Возможность для клиента отметить на карте свое местоположение при заказе товара, что упростит работу курьера. Также есть возможность разделять карту на отдельные зоны с разной ценой доставки товара.

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

Спутниковая карта — совокупность аэрографических и спутниковых снимков местности.

Схема — карта, изображенная в графическом виде с  объектами и их названиями.

Гибридная — спутниковая карта, с нанесенными названиями объектов, дорожной сетью и границами регионов.

Итак, что же умеют Яндекс.Карты?

Возможности Яндекс.Карт

Геокодирование адрес преобразуется в географические координаты (также действует и обратное преобразование). Пробки получение своевременной информации об автомобильных пробках Маршрутизация построение автомобильных маршрутов между двумя заданными точками, причем учитывается и загруженность дорог. Поддержка мобильных устройств корректное отображение карт Яндекса на мобильной версии сайтов, предназначенной для всевозможных планшетов, смартфонов. Мультиязычность возможность изменения языка карты Поддержка HTTPS можно использовать для сайтов, где соединение происходит по защищенному протоколу HTTPS (ресурсы, определяющие местоположение пользователя, либо имеющие дело с персональными данными или платежами. Это интернет-магазины, платежные системы или банки.). Собственные карты можно создать карту собственного производства, используя любое растровое изображение, в которой будут использоваться элементы управления Яндекс.Карт (масштабирование, размещение интерактивных элементов, перемещение). Сфера применения: отображение исторической карты, панорамы, схемы внутренних помещений, коттеджного поселка, планов застройки. Народная карта она рисуется на основе спутниковых снимков с помощью самих пользователей. Актуальна в случае, если информация на карте города недостаточно подробная или устарела. Кластеризация в случае, когда на карте отображено множество объектов она получается перегруженной, увеличивается нагрузка на браузер, информативность падает. Для решения этой проблемы используется кластеризация — деление карты на равные квадраты одного размера, объекты из одного квадрата объединяются в кластер (группу, обозначаемую меткой, в которой указано количество объектов, которые в нее входят). Мои карты создание пользовательских карт на основе карт Яндекса. Нужные объекты указываются с помощью различных графических объектов:многоугольников, меток, ломаных кривых.

Есть возможность генерировать карты двух разновидностей — интерактивные  и статические. Интерактивные карты обеспечивают взаимодействие с пользователем в виде реакции на определенные действия: пользователь может изменять масштаб, размещать метки. Также поддерживается возможность создания карт в виде обычных изоображений это так называемые статические карты. Они генерируются с помощью обычных HTTP-запросов.

При формировании карт часто используются различные графические объекты: линии, многоугольники, метки. В Яндекс Картах применяется набор компонентов, обеспечивающих отображение этих объектов.

Часто на карте бывает трудно отыскать нужный географический объект, поэтому в Яндексе был разработан набор следующих инструментов:

  • Геокодирование  и обратное геокодирование (о которых речь шла ранее);
  • Поиск станций метро, наиболее близких к заданным координатам;
  • Текстовый поиск по карте. Он может осуществляться и с помощью JavaScript и с помощью HTTP-запроса. Чтобы качество его было удовлетворительным, в Яндекс Картах, используются программные компоненты  для поиска Яндекса.

Сервис предоставляет возможность определения местонахождения пользователя по его IP-адресу. Как правило это применяется в случае, если нужен геотаргетинг — отображение содержимого на странице, которое соответствует географическому положению пользователя, например карты его города.

Теперь рассмотрим как добавить Яндекс Карту на сайт. Для этого откроем все сервисы Яндекса и найдем подраздел API Яндекса – Карты — Конструктор карт .

Конструктор Яндекс.Карт

Этот продукт — идеальный вариант для создания простенькой карты, без необходимости заморачиваться и лезть в дебри. А освоить данный инструмент реально буквально за пять минут.

Справа располагаются подсказки, которые объясняют назначение инструментов. Собственно говоря, инструменты практически те же самые :

  • Рука – для перемещения по карте
  • Метки – значки, для того чтобы отметить требуемый объект. Задается описание объекта, при необходимости – номер и цвет самого значка.
  • Рисование линий и многоугольников – идентично гугловскому. Редактирование производится по щелчку, также как и для меток можно указывать описание, толщину линии и ее цвет. Чтобы продолжить линию или завершить нажмите на ее последний узел, таким же образом этот узел можно и удалить.
  • Лупа – удобный инструмент для увеличения, приблизить карту можно выделив ее участок.
  • Изменение размеров карты – можно производить динамически, потянув за ее края.
  • Линейка – позволяет измерять расстояния на карте. Просто нажимаете на карте одну и другую точку. Выводится результат в метрах. Думаю весьма полезна в некоторых случаях.

Если динамика вам не нужна, можно выбрать статическую карту (без инструментов и увеличения/уменьшения) – это легко сделать нажав на переключатель внизу.

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

Заключительный шаг – копируем полученный код и вставляем на страницу своего сайта. На этом все!

Как подключить Яндекс Карты?

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

Карта всегда имеет прямоугольную форму и размещается в любом блочном HTML-элементе. Основные  параметры карты:

  • область показа;
  • область картографирования;
  • тип карты.

С помощью кода ниже, который тоже нужно разместить между тегами head, создаем карту и прописываем ее id (в примере id=’myMap’).Также при создании карты нужно указывать область картографирования (параметры центр — center и коэффициент масштабирования — zoom). Центр это ни что иное, как географические координаты центра карты.

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

Область показа карты зависит HTML-элемента, в котором она размещена. Нам осталось указать этот элемент в нужном месте веб-страницы (между тегами body) для того, чтобы карта отобразилась (id этого элемента совпадает с id карты).

Метки на Яндекс Картах

Представим, что нам нужно использовать какой-то свой значок в качестве метки или поставить метку на Яндекс Карте из предустановленного набора. Рассмотрим порядок действий в этом случае.

В Версии 2.1 карт используется векторное представление меток в формате SVG, т.е. меткам вы теперь можете задать произвольные цвета. Для установки нужного цвета задается параметр iconColor. Цвет прописывается в формате RGB или по названию, как принято в css (red, green и т.д).

Чтобы поменять стиль метки используется опция preset.

Возможные варианты значений, которые может принимать опция preset вместе с опцией iconColor:

Здесь вы можете посмотреть список всех остальных доступных стилей, например Метки с текстом (иконки,которые тянутся под контент) .

Вместо twirl#название значка везде надо указывать islands#название значка (islands#pinkStretchyIcon)

Стандартные значки (пиктограммы) работают только в предыдущей версии карт 2.0. Для того, чтобы пользоваться предыдущей версией нужно подключить такой скрипт

Placemark создает экземпляр метки.

Здесь мы описали несколько меток разных цветов и типов. Опция balloonContent — это содержимое всплывающего окна, которое открывается при нажатии на соответствующую метку (так называемый Балун).

Вот что получится в итоге:

Как добавить метку на Яндекс Карту в случае, если вы выбрали свою собственную картинку?

hintContent здесь — текст всплывающей подсказки(она появляется при наведении мышки).

Здесь аналогично код нужно прописать между тегами head.

Параметр iconImageHref должен содержать URL-адрес вашей картинки, для iconLayout нужно прописать значение deafult#image .

Если вы внимательно просмотрите все приведенные примеры, у вас наверняка возникнет интересный и важный вопрос. Дело в том, что мы все время использовали координаты местности и объектов, а как же находить эти координаты? Для этой цели в API Яндекс Карт предусмотрена специальная функция, которая называется geocode() и может в качестве параметра принимать строку с адресом объекта, а затем преобразовывать его в географические координаты. Приведем пример

Как теперь правильно создать страницу с картой в вашей CMS?

Тут есть несколько путей: во-первых, можно вставить этот код прямо в тексте страницы.

Но в данном случае визуальный редактор (TinyMCE и подобные) должен быть отключен, в противном случае он добавит лишние символы в html-код и карта не будет вставлена; во-вторых, можно создать шаблон для отдельной страницы, на которой будет карта и включить, соответственно, код уже туда.

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

Карта для WordPress

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

  • Создайте в папке своей темы файл шаблона страницы с картой (можно просто сделать копию файла page.php и внести небольшие изменения — добавить вышеприведенный html-код). Дайте ему название, к примеру, yamaps.php. В начале этого файла укажите текст
  • Зайдите в админку и нажмите пункт Страницы — Добавить новую
  • Справа найдите раздел атрибуты страницы и выберите из выпадающего списка Шаблон для создаваемой страницы ( название будет совпадать с тем, которое вы указали в начале файла после текста Template Name, в нашем случае Яндекс Карты)

  • Сохраните созданную страницу под каким-либо именем (к примеру, Схема проезда).
  • Второй способ для тех, кто хочет поместить карту прямо в текст статьи

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

    .

    Плагин Яндекс Карты

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

    Источник: nikel-blog.ru

    Категория: Безопасность

    Похожие статьи: