Найдем в БД объекты которые находятся рядом в радиусе одного километра.
В системе координат один градус равен 111 км, значит 1 км = 1 / 111 = 0,009009009009009°.
Напишем SQL запрос который найдет все объекты у которых координаты входят в требуюмыю область.
Выведем найденные метки синим цветом:
<div id="map" style="width: 100%; height:500px"></div> <script src="http://api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); function init() { var myMap = new ymaps.Map("map", { center: [<?php echo $object['point']; ?>], zoom: 16 }, { searchControlProvider: 'yandex#search' }); var myCollection = new ymaps.GeoObjectCollection(); // Добавим метку красного цвета.
var myPlacemark = new ymaps.Placemark([ <?php echo $object['point']; ?> ], { balloonContent: '<?php echo $object['name']; ?>' }, { preset: 'islands#icon', iconColor: '#ff0000' }); myCollection.add(myPlacemark); // Добавим найденные метки. <?php foreach ($list as $row): ?> var myPlacemark = new ymaps.Placemark([ <?php echo $row['point']; ?> ], { balloonContent: '<?php echo $row['name']; ?>' }, { preset: 'islands#icon', iconColor: '#0000ff' }); myCollection.add(myPlacemark); <?php endforeach; ?> myMap.geoObjects.add(myCollection); // Сделаем у карты авто масштаб чтобы были видны все метки. myMap.setBounds(myCollection.getBounds(),{checkZoomRange:true, zoomMargin:9}); } </script>Результат:
snipp.ru
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &. |
webmap-blog.ru
Перед разработчикам, которые используют API Яндекс.Карт, довольно часто встаёт задача отобразить много объектов на карте. Действительно много — порядка 10 000. Причем эта задача актуальна и для нас самих — попробуйте поискать аптеки на Яндексе. На первый взгляд кажется: «А в чем собственно проблема? Бери да показывай». Но пока не начнешь этим заниматься, не поймешь, что проблем на самом деле целый вагон.
Вопросы по большому количеству меток с завидной регулярностью поступают в наш клуб и техподдержку. Кто все эти люди? Кому может быть интересно показать на карте больше 10 меток? В этом посте я подробно рассмотрю весь вагон проблем и расскажу, как в API появились инструменты, помогающие разработчикам оптимально показать большое количество объектов на карте.
В основном с проблемой сталкиваются информационные сервисы, которые хотят привязать данные к карте. Например сайт bankomator.ru рассказывает пользователям, где найти банкомат нужного банка.
Также от большого количества данных страдают ресурсы, посвященные недвижимости. Яркий пример – Cian.ru.
Мы сами внутри Яндекса до недавнего времени советовали смежным командам различные «хаки» и приемы для показа множества точек через API. Яркие примеры – Яндекс.Недвижимость и Яндекс.Такси.
Пункт 1. В чем собственно проблема?
Чтобы прочувствовать на себе всю тяжесть поставленной задачи, нужно попробовать ее решить. Для начала давайте поймем, как показать карту на странице вашего сервиса. Рассмотрим простую схему:
Клиент (например, Safari на iPhone) запрашивает с сервера страницу index.html. Страница представляет собой документ вот с таким кодом:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); function init () { var myMap = new ymaps.Map('map', { center: [55.76, 37.64], zoom: 10 }); } </script> </head> <body> <div id="map"></div> </body> Теперь усложняем задачу. У нас есть база данных, в которой хранятся адреса болельщиков «Зенита». И мы хотим показать на карте адреса этих болельщиков.
Решение задачи «в лоб»:
- Делаем выборку из базы данных, получаем 1 млрд адресов.
- Дописываем в файл index.html массив, содержащий весь миллиард адресов.
- Передаем этот файл на клиент.
- На клиенте перебираем данные массива и рисуем для каждого элемента метку на карте.
Если вы менеджер проекта, и ваш разработчик демонстрирует такое решение, скорее всего, вы поседеете. Вы выскажете ему свое оценочное суждение. Если убрать нецензурную брань, можно будет выделить следующие тезисы:
- Вес файла index.html увеличится до нескольких Мб и у пользователя страница будет открываться по несколько секунд.
- Зачем передавать на клиент ВСЮ базу, если нужно показать только метки для Москвы?
- Зачем рисовать на карте ВСЕ метки, если человек увидит только десятую их часть?
- Если на карте нарисовать около 100-200 меток обычным способом, карта будет тормозить.
- Можно загружать метки постепенно, пачками, чтобы канал не забивался и браузер успевал эти метки отрисовывать?
Мысль получает два направления:
- Нужно уметь определять, какие данные видит пользователь и запрашивать только нужное.
- Когда это нужное пришло, его надо оптимально отрисовать.
В API Яндекс.Карт сто лет назад был сделан инструмент для решения этих задач – технология активных областей. Кому интересно подробно, почитайте руководство разработчика.
Кратко – вы генерируете на сервере прозрачные картинки с метками плюс текстовое описание меток. Клиент может следить за видимой областью карты и запрашивать данные, которые нужны для текущей видимой области карты.
С помощью хотспотов, например, рисуются пробки на maps.yandex.ru. На этой же технологии сделан сайт bankomator.ru.
У этой технологии есть несколько существенных минусов
1. Очень сложная серверная часть. Попробуйте на досуге написать модуль, который генерирует вот такие картинки и их геометрические описания, и вы все поймете.
2. Абсолютная негибкость. Невозможно «приподнять» метку при наведении на нее курсора. Невозможно быстро поменять на клиенте внешний вид меток. Короче – на любой чих надо просить сервер перегенерировать картинку.
Поэтому пользователи крутились, как могли, без хотспотов – передавали наборы единичных объектов на клиент пачками, через таймаут. При этом на клиенте их снова ждали проблемы. Если вы передали на клиент 1000 точек, как их отрисовать?
Из каждой точки нужно было сгенерировать объект ymaps.Placemark и добавить его на карту. Можно было добавить метки в кластеризатор (ymaps.Clusterer) и добавить откластеризованные метки на карту. Тут надо обратить внимание, что при кластеризации 10 000 точек нужно сначала эти 10 000 точек инстанцировать, а потом передать в кластеризатор. То есть метка может не показаться на карте, так как войдет в кластер, но мы все равно потратим время на ее инициализацию.
Подытожив все эти дела, мы решили написать модуль, который бы позволил:
- Быстро и легко отрисовать на клиенте большое количество точек.
- Избежать лишних инициализаций при работе с точками на клиенте.
- Загружать данные на клиент строго по требованию.
И мы это сделали. Мы котики.
Пункт 2. Рисуем метки быстро
Чтобы научиться рисовать метки быстро, надо было понять, какие проблемы кроются в текущем, уже существующем решении. Давайте посмотрим, что может делать объект ymaps.Placemark:
- Он умеет рисоваться на карте.
- У него есть свой менеджер балуна
placemark.balloon. - У него есть свой менеджер хинта
placemark.hint. - У него есть редактор, который позволяет перетаскивать метку и фиксировать ее координаты
placemark.editor.
Кроме того, метка динамически реагирует на любое изменение внешней среды – изменение опций, данных, проекции карты, смена масштаба карты, смена центра карты и многое, многое другое. Такие вот у нас могучие плейсмарки.
А нужна ли вся эта программная мощь для случая, когда разработчику просто нужно показать много однотипных меток на карте? Правильно, не нужна.
Поэтому первое озарение заключалось в следующем: а давайте вынесем все вспомогательные модули меток в один общий компонент и для каждого отдельного объекта будем создавать только программную сущность, которая непосредственно отвечает за отрисовку.
Второе озарение пришло, когда мы думали над проблемой лишних программных инициализаций. Вспоминаем рассказ выше, где-то в районе вот такой картинки.
Нам захотелось избавиться от лишних программных инициализаций, и мы придумали гениальное. Садитесь поудобнее, сейчас будет откровение: если вам мешают лишние программные инициализации – не делайте их.
Мы решили, что будем хранить пользовательские данные об объектах (по факту в JSON), а программные сущности для объектов будут создаваться только тогда, когда какой-либо объект нужно будет отрисовать на карте.
После комбинации этих идей и некоторой разработки родился новый модуль API для отображения большого количества точечных объектов – ymaps.ObjectManager.
На вход этого менеджера скармливается JSON-описание объектов.
Менеджер анализирует, какие метки попадают в видимую область карты и либо рисует метки, либо кластеризует эти метки и показывает результат на карте.
Для отрисовки меток и кластеров на карте мы взяли только часть объекта ymaps.Placemark (а именно ymaps.overlay.*), которая отвечала только за отображение метки на карте. Всю инфраструктуру типа балунов и хинтов мы вынесли в единый общий компонент.
Эти приемы позволили нам неплохо продвинуться в вопросе отрисовки большого числа меток на клиенте. Вот какие мы получили приросты по скорости:
График 1. Скорость создания и добавления объектов на карту с последующей асинхронной отрисовкой их видимой части
- Создание 1000 меток и добавление их на карту, все метки видны.
- Создание 1000 меток и добавление их на карту с кластеризацией, все метки видны.
- Создание 10000 меток и добавление их на карту с кластеризацией, все метки видны.
- Создание 50 000 меток и добавление их на карту с кластеризацией, все метки видны.
- Создание 50 000 меток и добавление их на карту с кластеризацией, видны 500 объектов.
- Создание 50 000 меток и добавление их на карту без кластеризации, видны 10 000.
График 2. Скорость создания и добавления объектов на карту с последующей синхронной отрисовкой их видимой части
- Создание 1000 меток и добавление их на карту, все метки видны.
- Создание 1000 меток и добавление их на карту с кластеризацией, все метки видны.
- Создание 10000 меток и добавление их на карту с кластеризацией, все метки видны.
- Создание 50 000 меток и добавление их на карту с кластеризацией, все метки видны.
- Создание 50 000 меток и добавление их на карту с кластеризацией, видны 500 объектов.
- Создание 10 000 меток и добавление их на карту без кластеризации, видны 2000.
- Создание 5000 меток и добавление их на карту без кластеризации, видны 1000.
Важное замечание. Вся эта статистика справедлива для современных браузеров. IE8 к числу этих браузеров не относится. Поэтому для него цифры будут значительно хуже, но думаю для большинства это не имеет значения.
У нас получилось ускорить непосредственно создание и отрисовку объектов, вдобавок к этому мы максимально оптимизировали инициализацию программных сущностей. Теперь вы можете, например, откластеризовать на клиенте 50 000 точек, и работать с картой будет комфортно.
Почитать подробно про модуль можно в нашем руководстве разработчика, а посмотреть вживую примеры работы модуля — в песочнице.
Итак, мы научились быстро-быстро рисовать и кластеризовать точки на клиенте. Что дальше?
Пункт 3. Оптимально подгружаем данные
Помните пример про болельщиков «Зенита»? Мы решили проблему отрисовки данных на клиенте, но никак не решили проблему, связанную с оптимальной подгрузкой этих данных. Мы начали собирать типовые задачи пользователей API. По итогам исследований мы получили два типовых кейса:
- У человека на сервере много данных, он хочет показывать их на клиенте, но подгружать данные по мере надобности.
- Разработчик подготавливает данные на сервере (например, реализует серверную кластеризацию) и хочет показывать на клиенте результаты этой обработки.
Для решения этих кейсов были написаны модули LoadingObjectManager и RemoteObjectManager соответственно.Оба модуля основаны по сути на реализации ObjectManager, но имеют ряд различий в алгоритме загрузки и кеширования загруженных данных.
В итоге по мере работы пользователя с картой ему будут приходить данные из вашей базы. В какой-то момент все или необходимая часть данных будут подгружены и запросы на сервер вообще перестанут отправляться.
Данные хранятся на клиенте в pr-дереве, поэтому выборки даже для большого количества данных делаются довольно шустро.
Теперь обсудим вариант номер два – отображение на клиенте результатов серверной кластеризации. Допустим, вы написали серверную кластеризацию меток. Также вы написали скрипт, который по запросу от клиента умеет отдавать кластеры и единичные метки, не вошедшие в состав кластера.
Вам остается только создать инстанцию RemoteObjectManager и прописать в нем путь до этого чудо-скрипта. RemoteObjectManager будет работать почти так же, как и LoadingObjectManager. Разница будет только в том, что мы будем перезапрашивать данные с сервера при каждой смене зума.
Поскольку данные кластеризуются на сервере, то сервер и только сервер может знать, какие данные нужно, а какие не нужно показывать в данный момент на карте. Поэтому информация об объектах хранится на клиенте только до первой смены зума, а потом все запрашивается заново.
Если с сервера передается описание метки-кластера, то на клиенте эти метки подцепят всю инфраструктуру из API – для кластеров нарисуются специальные значки, для них будут работать все стандартные поведения и так далее и тому подобное.
Пункт 4. Размышления на тему серверной реализации
В этом разделе мы хотим перечислить концепции хранения и обработки данных на сервере, которые мы предполагали при проектировании клиентской части. Пойдём от простого к сложному.
1. Хранение информации об объектах на сервере в статических файлах
Клиентский код оперирует данными исключительно потайлово. Тайл – это некоторая нумерованная область на карте. Подробнее про нумерацию тайлов можно прочитать в нашей документации.
Когда на странице показывается некоторая область карты, клиентский модуль вычисляет, какие тайлы попали в эту видимую область, проверяет наличие нужных данных и отправляет запросы за данными по необходимости.
У клиентского модуля есть настройки, которые заставляют отправлять запросы за каждым новым тайлом по отдельности. Чем это ценно? Да тем, что мы получаем конечное число вариантов запроса клиента на сервер.
zoom=0, tile=[0, 0]
zoom=1, tile=[0, 0]
zoom=1, tile=[0, 1]
zoom=1, tile=[1, 0]
zoom=1, tile=[1, 1]
zoom=2, tile=[0, 0]
…
Поскольку запросы известны заранее, ответы на запросы тоже можно сгенерировать заранее. Организуем на сервере какую-то такую файловую структуру.
В файлах будет храниться примерно такой код:
myCallback_x_1_y_2_z_5({ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "geometry": { "type": "Point", "coordinates": [55.831903, 37.411961] }, "properties": { "balloonContent": "Содержимое балуна", "clusterCaption": "Метка 1", "hintContent": "Текст подсказки" } }, ... ] } При загрузке такого файла на клиенте будет вызван JSONP-callback, прописанный в файле. Данные попадут в недры LoadingObjectManager, закешируются и отрисуются в нужном виде.
В результате на сервере можно хранить просто статические файлы с наборами данных, а клиентская часть сама решит, что ей когда запросить и показать.
2. Динамическое формирование ответа из статических файлов
Существенным минусом вышеописанного решения является большое количество запросов за данными от клиента к серверу. Намного целесообразнее отправлять запрос сразу за несколькими тайлами, чем запрашивать данные для каждого тайла по отдельности.Но для обработки запросов за группами тайлов уже придется написать некоторый серверный код.
При этом данные можно продолжить хранить в отдельных файлах. Когда от клиента поступит запрос за данными в некоторой прямоугольной области, достаточно будет склеить содержимое нескольких файлов в один ответ и отправить его обратно на клиент.
3. Динамическое формирование ответа с использованием базы данных
Самый верный, на наш взгляд, путь – реализовать серверную часть с использованием какой-либо базы данных, умеющей индексировать геопривязанные данные. Для любой базы, не поддерживающей пространственные индексы, можно создать подобный индекс самостоятельно, используя концепцию пространственных ключей.
Вообще хранение геопривязанных данных на сервере и их кластеризация – тема отдельной беседы. Так что обсудим в другой раз.
В этом репозитории живет пример реализации серверной части с серверной grid-кластеризацией, написанный на node.js + mongo.db. может кому-то пригодится (Демо).
habr.com
Используя сервис «Яндекс.Карты» Вы можете создать интерактивную карту для своего сайта и установить на ней множество меток с индивидуальной информацией в каждой метке.
Видео: установка меток на Яндекс.Карте
Для работы с конструктором карт от Яндекс у вас должен быть предварительно создан аккаунт на Yandex.ru, который позволит добавлять и хранить карты в профиле для дальнейшей корректировки.
Создание новой карты
Авторизуйтесь в сервисе «Яндекс» и перейдите в конструктор карт по адресу:
https://tech.yandex.ru/maps/tools/constructor/
Во всплывающем окне, вам будет предложено создание новой карты. Нажмите — «Создать карту».
Далее, в строке поиска, введите адрес местоположения вашей компании, и нажмите кнопку — «Найти».
Используйте встроенные инструменты для подготовки карты:
- измените масштаб карты
- в форме описания, добавьте название, адрес и контактную информацию компании
- измените цвет и тип маркера при необходимости
После внесения изменений, нажмите кнопку «Готово»
Установка нескольких меток на карте
После внесения информации в описание, при необходимости, вы можете установить несколько маркеров на интерактивной карте. Для этого, перейдите во вкладку «Метки», и приступайте к установке маркеров в необходимых областях карты, путём нажатия левой клавиши мыши.
Примечание: в каждой метке можно указать описание, цвет и тип для их различия.
По завершению всех меток, нажмите «Сохранить и продолжить».
Настройка размера карты
На данном этапе, вам необходимо указать размер интерактивной карты, которая будет отображаться в разделе с контактной информацией.
Вы можете указать любую ширину карты в пикселях или процентах, для того, чтобы карта выводилась в аккуратном виде, по всей ширине содержимого раздела, следует установить галочку «Растянуть по ширине», а высоту при этом рекомендуем указать в пределах 300-350 пикселях.
Примечание: мы приводим лишь пример подготовки карты для размещения на сайте, вы можете самостоятельно указать все настройки по своему усмотрению, при необходимости.
Размещение карты на странице сайта
После окончания создания и редактирования карты, получите её код для дальнейшего размещения на сайте.
Для этого, нажмите на кнопку «Получить код карты».
Скопируйте код из всплывающего окна, и разместите его в форме редактирования страницы вашего сайта. Перейдите в редактирование содержимого раздела, где вы хотите разместить интерактивную карту.
Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.
Во всплывающем окне, необходимо разместить код интерактивной карты.
Вставьте код карты в конец содержимого (место размещения карты указано для примера — вы можете выбрать любое подходящее место в структуре страницы). Нажмите кнопку «Обновить».
После проделанных действий, нажмите кнопку «Сохранить», и проверьте вывод карты на сайте.
uralcms.ru
shpargalkablog.ru
Поиск по Yandex Maps, народная карта и Яндекс.Справочник
Сам сервис онлайн карт от Яндекса (читайте про то, что такое сейчас Яндекс и почему он так называется) появился в 2004 году и с тех пор продолжает усилено развиваться, тем более, что у него есть очень мощный конкурент в лице Google maps. Жители многих крупных городов России, Украины, Казахстана или Белоруссии пользуются такими расширенным возможностями, как Пробки или Панорамы.
Последний сервис (панорамы) был запущен относительно недавно (2009 год) и яндексмобиль (с четырьмя широкоугольными камерами на крыше) еще не успел объехать все уголки нашей необъятной родины, но там, где панорамы уже появились, стало намного проще планировать поездки по незнакомому маршруту.
Кроме автомобиля, сотрудники Яндекс Карт объезжают некоторые участки на велосипедах или же пешком (например, в парках). В последнее время появились еще и панорамы сделанные с вертолета, и чтобы их можно было посмотреть, нужно поставить галочку «С воздуха» под соответствующей кнопкой, но правда такая штука доступна только для Питера.
Можете ознакомиться со списком городов, для которых существуют подробные схемы, панорамы, снимки со спутника или же информацию по пробкам:
Про сервис Пробок и говорить не стоит. В Москве и других крупных городах на мобильниках у 90 водителей установлено приложение с Yandex Maps, хотя последнее время оно уже не помогает объехать пробки, а просто говорит о том, что стоять еще очень долго и остается только смириться и не питать радужных надежд.
Сервис Яндекс Карт предназначен прежде всего для поиска:
- Конкретных адресов или населенных пунктов
- Достопримечательностей
- Различных объектов
- Организаций
В поисковой строке пользователь вводит то, что хочет найти, с помощью топонимов (например, Урюпинск улица Ленина), либо с помощью ввода названия фирмы, организации, достопримечательности или еще чего-то, что может иметь отношение к геопоиску.
В ответ он получает, как правило, несколько вариантов, которые отображаются как в текстовом виде (в левой колонке), так и виде меток на карте.
Каким же образом осуществляется ранжирование в этой поисковой выдаче?
- Во-первых, учитывает релевантность запросу и то место на схеме, которое было открыто в момент ввода запроса (чем ближе к нему территориально расположен объект, тем больше у него шансов стоять первым в левой колонке).
-
Во-вторых, при поиске организаций существует такое понятие, как платное (приоритетное) размещение в начале списка (оплачивается при добавлении или редактировании организации в Яндекс.Справочнике, о котором речь пойдет чуть ниже). Но в основном все же учитывается географическая близость искомого объекта от того места, где вы находитесь, и только если там найдется фирма оплатившая первое место в списке, то она потеснит остальных.
В случае, когда фирм оплативших показ в Яндекс Картах будет несколько, то они будут по очереди показываться на первом месте, чтобы никому не было обидно. Если кому-то интересно, то плата за первое место в Yandex Maps взимается по такой тарифной сетке:
Если нужно найти другое место или объект, то откройте в Yandex Maps примерно тот же район, где должен находится искомый адрес или достопримечательность, либо просто пробегитесь в левом списке по тому, что для вас смог найти Яндекс, на предмет поиска соответствия.
Откуда же берет Яндекс информацию, по которой осуществляет поиск и формирует выдачу? Ну, во-первых, их собственная картографическая служба, которая, кстати, относительно недавно осилила карту всего мира, что уже само по себе является достижением. Теперь для прокладки маршрута между Улан-Удэ и Лос-Анджелесом не нужно открывать Google Maps.
Хотя тут я все же поторопился, ибо список городов, до которых можно проложить маршрут в Яндекс картах, пока что ограничен Россией, Казахстаном, Белоруссией и Украиной. Т.е. некоторое отставание от аналогичного сервиса Гугла все еще имеет место быть, ибо пока даже не все названия буржуйских городов и улиц переведены на великий и могучий. Но лиха беда начала — картографы работают не покладая рук и не выпуская из них словарь.
Народная карта
Вторым немаловажным источником информации, с помощью которого Яндекс получает данные о различных объектах и достопримечательностях, является так называемая Народная карта. Это аналог Википедии, где сами же пользователи создают контент, а именно вносят пояснительные надписи к объектам и местам, которые они хорошо знают и имеют что об этом сказать.
За основу берутся снимки со спутника, поверх которых все желающие могут с помощью простого конструктора наложить схематичное обозначение зданий, улиц, парковых аллей, памятников и других удостоенных внимания мест. Чуть ниже я буду рассказывать про вставку схем проезда от Яндекса на свой сайт, и там будет возможность выбрать именно вариант вставки Народных карт, если вы того сильно пожелаете.
Если сами захотите внести свою лепту, то изучите сначала простые принципы работы с редактором Народных карт и посмотрите пример выполнения простейшей операции в нем:
Яндекс Справочник — как добавить свой сайт или фирму на карту
В-третьих, источником поиска по организациям является сервис Яндекс.Справочник. Знали про такой? Если у вас есть свой бизнес, то вы, наверняка, уже добавили свои реквизиты туда (адрес, телефоны, сайт и т.п.). Еще не добавили? Ну, как же вы так оплошали?
Такую ситуацию нужно немедленно исправить, ибо в сам справочник пользователь вряд ли полезет, а вот поиск на карте его запросто может заинтересовать, особенно если вы продвигаетесь по геозависимым поисковым запросам. Даже в обычной выдаче при явной географической привязке запроса на нулевом месте будет показана Yandex Maps с ответами:
Добавить свой сайт на Яндекс карты (организацию, фирму) через упомянутый справочник довольно просто. Если вы не уверены, что не делали это ранее, то проверьте наличие или отсутствие вашей организации в этом самом справочнике.
Если вашей фирмы там нет, то воспользуйтесь формой добавления новой организации в Справочник, кнопка вызова которой появится с правой стороны под формой проверки:
Далее следуйте инструкциям в приведенном ниже ролике (указанные данные, такие как, например, телефон или адрес, потребуется подтвердить, поэтому они не должны быть фейковыми, иначе добавиться на карту не получится):
При этом нужно быть авторизованным на Yandex и лучше всего, если это будет не ваш личный аккаунт, ибо может понадобиться отредактировать данные добавленные на карту (или заказать приоритетное размещение), а доверять свой аккаунт сотруднику будет не всегда правильно. Чтобы получить новый Яндекс Паспорт достаточно будет следовать приведенным инструкциям.
Чем еще привлекателен поиск по Yandex Maps для пользователей, так это тем, что они могут почитать и при желании оставить отзыв об организации. Причем отзывы модерируются (не владельцами фирмы, естественно, а сотрудниками зеркала рунета) и явный спам или бред отсеивается.
Кликнув по отзывам вы попадете в карточку организации, где сможете их прочитать и при желании оставить свой собственный. Там же может находиться и дополнительная инфа по этой фирме.
Создание карт в Яндексе, маршруты и мобильные приложения
Это мы описали три основных источника, откуда Яндекс черпает информацию при поиске по географическим объектам. Но есть еще и четвертый. Это так называемые метки, которые пользователь оставляет на так называемых «Моих картах», сохраняя их с возможностью публичного доступа к ним. Понимаете о чем я говорю? Если нет, то буквально в паре абзацах попробую уложиться с разъяснениями.
В левой колонке есть вкладка «Мои карты». Суть ее заключается в том, что здесь вы можете сохранить все те метки, выделения, проложенные маршруты и другие вещи, которые вы сотворили на Yandex Maps. Лично я таким образом отмечал места, куда мне удалось доехать на велосипеде в окрестностях моего местожительства.
Однако, вы можете поставить метку, выделить любое здание (проложить маршрут) и написать, что там находится ваша фирма, добавив в описание метки нужные ключевые слова (в этом случае подтверждать информацию будет не нужно), ибо есть вероятность учета этой информации при поиске по Yandex Maps. В таком случае карту лучше будет сохранять как публичную (пометка «всем») на приведенном выше скриншоте.
Подробности читайте в статье про получение бесплатного коммерческого трафика с Яндекс Карт, которую опубликовал автор блога Мистерия Онлайн. Там описаны некоторые хитрости, которые работали, во всяком случае, на момент написания той заметки.
Хотя, возможность сохранения созданных меток и разметок может пригодиться, как я и упоминал, просто в личных целях. В этом случае лучше всего будет сохранять карты, предварительно авторизовавшись на Яндексе, чтобы потом можно было их редактировать, сохранять их неограниченное число штук, а так же помечать их как личные (только мне) или как узконаправленные (только по ссылке, которые вы кому-то сообщите, а при просмотре списка ваших творений другим пользователем она видна не будет).
Если захотите переслать кому-нибудь ссылку с проложенным маршрутом, то можно воспользоваться кнопкой, расположенной в правом верхнем углу «Ссылка», где кроме обычной гиперссылки вам еще предложат расшарить линк на созданную вами карту в популярные социальные сети.
Раз уж речь зашла о прокладке маршрута на Yandex Maps, то и об этом скажу пару слов. Удобная штука. Когда не было машины, то актуально было прокладывать маршрут движения на общественном транспорте в незнакомое место.
Яндекс говорил, на каком автобусе или троллейбусе дотелепать до ближайшего метро, рассказывал про пересадки при движении под землей, и потом еще вещал как добраться до конечной точки вплоть до количества метров, которые нужно будет пройти пешком.
К тому же, Yandex Maps предупреждает и про время, предположительно необходимое на совершение данного паломничества и даже альтернативные маршруты предлагает к вашему рассмотрению.
Когда появилась машина, то стало еще более актуальным использовать прокладывание маршрута, ибо ситуация с пробками иногда вносит серьезные коррективы. Для этого достаточно просто ввести два адреса (начальной и конечной точки) в левой колонке или же просто поставить эти точки на схеме мышью (первый клик — начало маршрута, второй — конец).
Далее достаточно нажать кнопку «Проложить» и увидеть результат на карте Яндекса, а в левой колонке почитать текстовое описание совершаемых поворотов и прочих маневров, если это необходимо.
Для учета пробок поставьте соответствующую галочку, а чтобы поменять маршрут в каком-то отдельном месте, достаточно будет кликнуть в этом месте левой кнопкой мыши и при появлении белого кружка схватить его и перетащить на нужную развязку или трассу. Правда при ручной корректировке маршрута на Яндекс карте учет пробок уже работать не будет — все отдается под вашу ответственность.
Кстати, раз у речь зашла об очевидном, то спрошу вас, а сколькими способами можно менять масштаб отображения? Лично я знал только про кнопки с плюсом и минусом (и движком между них) в левом верхнем углу, да про вращение колеса мыши. А оказалось, что дабл-клики правой и левой кнопкой мыши тоже позволяют играться с детализацией, что иногда может быть удобно.
Но маршруты и пробки прокладывать дома, конечно же, интересно, однако чаще всего мы с вами пользуемся именно мобильными приложениями Яндекса (Карты, Навигатор или Метро). Первая программа, думаю, установлена на 90% телефонов в крупных городах России, где имеют привычку собираться огромные пробки. Оно и понятно, ибо удобно, оперативно и достоверно. Меня эта шняга пока серьезно не подводила.
Мобильные приложения можно будет совершенно бесплатно скачать с официального сайта или же распознать приведенный QR код, со ссылкой на закачку файла по мобильному телефону (на нем у вас должна стоять какая-нибудь программа, помогающая расшифровать этот QR код):
- Карты и Пробки
- Яндекс Навигатор
Мобильные Яндекс.Карты имеют очень схожий функционал с онлайн версией (пробки, прокладка маршрута, поиск), однако для поездок по незнакомому маршруту лучше всего, конечно же, подойдет их Навигатор, общий принцип работы которого хорошо показан в этом ролике:
Хотя, лично я Навигатор с Yandex Maps храню на телефоне как резервный вариант, ибо тонюсенький Гармин с обалденным экраном, голосовым управлением и прекрасными картами России меня полностью устраивает, разве что только пробки у него не всегда своевременно подгружаются, ибо для этого используется радиоканал и когда вся Москва стоит, то вещать приходится много и пока дойдет очередь до района, в котором ты едешь, все может десять раз поменяться.
Api Яндекс карт и конструктор для их создания
Ну, вот с общими вопросами покончили, теперь пора переходить к практике, а именно к тому, как создать в конструкторе и вставить на свой сайт карту от Яндекса. На самом деле это и легко, и сложно одновременно.
Если у вас сайт-визитка, блог или простенький интернет магазин, на имеющий разветвленной сети офисов, то вам вполне хватит базовых возможностей имеющего конструктора, а вставить код на сайт сможет даже дилетант.
Собственно, есть очень хороший ролик, который поможет вам принять решение о необходимости со всем этим заморачиваться — Как улучшить сайт с помощью API Яндекс.Карт (в примерах):
Если подходить к делу основательно, то правильно составленная схема проезда или расчет стоимости доставки исходя из места указанного пользователем, может существенно улучшить юзабилити и в конечном итоге сделать посетителя покупателем.
Подробности смотрите в ролике, где рассказывается как улучшить интернет-магазин с помощью карт:
Другое дело, если вам требуется выйти за базовые рамки конструктора Yandex Maps и сотворить что-то сравнимое по грандиозности со схемами покрытия ведущих сотовых операторов, списком всех банкоматов сети Киви, ситуацией с пробками в вашем районе и т.п. вещей. Тут вам понадобится программист владеющий ДжаваСкриптом.
API Яндекс.Карт, например, позволяет накладывать слой с пробками на своем сайте, но для этого возможностей встроенного конструктора, к сожалению, не хватит и придется пользоваться услугами специалиста, владеющего JavaScript, которому надо будет всего лишь ознакомиться с документацией по API.
Да, сам термин API (application programming interface) означает получение возможности использовать какое-то программное обеспечение, не зная вообще как оно работает, но имея описание тех инструментов (ручек), которые необходимы для его подключения и реализации тех или иных возможностей. Штука эта распространенная и довольно часто используется.
Апи Yandex Maps описано по приведенной чуть выше ссылке, но также имеется и простой конструктор, который вам позволит оперативно создать карту нужного вам района, поставить на ней необходимые метки с описаниями, выделить нужные объекты и показать путь, по которому к ним проще всего добраться, например, от ближайшей станции метро.
Конструктор карт в Яндексе
Живет API конструктор Яндекс карт по приведенному адресу и представляет из себя довольно-таки приглядную картину:
Равно как и при добавлении организации в справочник Яндекса, при работе с этим конструктором лучше всего будет завести отдельный аккаунт в зеркале рунета (корпоративный, например), ибо созданные в нем карты можно будет потом редактировать (не меняя кода, который вы вставили на свой сайт), но вот перенести их в другой аккаунт не получится.
Кроме сохранения созданных карт, в новом API конструкторе теперь не требуется получать ключ API для своего сайта, хотя некоторые расширения для используемых вами CMS (движков сайтов) могут этот ключи попросить. На всякий случай упомяну, что получить API-ключ можно на странице по приведенной ссылке, просто введя адрес своего ресурса:
Но вернемся к нашему конструктору. Что он нам предлагает? Ну, собственно, ничего особенного, но и одновременно все нужное там есть. Инструменты нанесения меток на карту расположены в верхней панели и состоят из четырех кнопок.
Первая позволяет поставить обычную метку в виде большой запятой, которую можно раскрасить в разные цвета, дать описание и даже присвоить номер.
Ставится метка путем активации данной кнопки и клика по нужному месту на схеме. Если промазали или передумали, то ее потом всегда можно будет подвинуть, удерживая левую кнопку мыши, или удалить.
Второй инструмент в API-конструкторе Яндекс карт называется «Рисование линий» и может пригодиться при показе пути движения до вашего офиса, например, от ближайшей станции метро или остановки общественного транспорта. Рисуется она так. Кликаете в месте начала маршрута, потом кликаете в месте первого поворота и так далее вплоть до конечной точки.
Если какая-то точка оказалась лишней или встала не туда, то ее можно удалить, щелкнув по ней левой кнопкой мыши и выбрав соответствующий пункт. Когда маршрут будет завершен, то кликнув по любой его узловой точке можно будет выбрать вариант «Завершить».
В этом случае вам будет предложено ввести описание для этого маршрута и выбрать не только цвет линии, но и ее толщину, а так же прозрачность, что может существенно повысить наглядность и уменьшить аляпистость схемы прохода или проезда до вашей фирмы.
Ну, и последний из полезных инструментов конструктора Yandex Maps называется «Рисование многоугольника». Нужен от для того, чтобы подсветить фоновой заливкой те здания или объекты, которые вы хотите пометить на вашей схеме проезда (прохода) и к которым будут вести описанные выше маршруты.
Ваша задача состоит в том, чтобы активировав этот инструмент в API конструкторе, планомерно обкликать все здание по углам, после чего кликнуть по любой узловой точке и выбрать «Завершить».
В результате появится форма, в которую так же, как и в случае с маршрутом, можно будет ввести описание, задать цвет и прозрачность заливки, а также толщину линии обводки.
Последняя кнопка на панели инструментов конструктора позволяет активировать маркеры в правом нижнем углу схемы, чтобы можно было изменять ее размеры. По большому счету она не нужна, ибо проще будет поменять ширину и высоту вставляемой на сайт карты от Яндекса напрямую в полученном коде.
Да, еще у вас будет инструмент изменения масштаба (в верхнем левом углу), форма для ввода конкретного места, для которого нужно создать схему, а также возможность выбрать способ отображения из четырех вариантов: схема, гибрид, спутник и народная. О Народной карте и ее создании я говорил чуть выше, а вот так может выглядеть ваша схема при ее выборе (несколько аляписто, на мой взгляд):
После всех этих непосильных трудов вам только останется дать схеме название и нажать кнопку «Сохранить и получить код». Однако, вам на выбор будет предложено два варианта кода для вставки карты на свой сайт:
-
Интерактивная — ее код API придется вставлять в виде вызова скрипта, что может вызвать небольшие затруднения у начинающих, но зато посетители сайта смогут менять ее масштаб, перемещаться по ней и выбирать варианты отображения (спутник, схема и т.п.).
Полученный код интерактивной карты Яндекса можно будет подогнать по размеру под ширину вашей страницы, просто поменяв цифирьки в его конце (715 пикселей, в моем случае):
<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=CFQ6uGHTgEElnjIHeZkCt8ySKv9DEJkG&width=715&height=450"></script>
- Статическая — код API будет представлять из себя обычный тег IMG для вставки картинки на сайт, который не вызовет проблем ни при каких обстоятельствах, но зато схема будет представлять из себя просто фотку, которую нельзя ни масштабировать, ни двигать. Ширину и высоту статической схемы проезда опять же можно будет изменять прямо в коде.
<img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=8dq0AuCy924rvk5YN8zIpJuHRg2dPybP&width=600&height=443" alt=""/>
Как вставить Яндекс карту на сайт
В Вордпрессе вставить код интерактивной карты на сайт можно будет напрямую (в тексте статьи), если вы используете Html редактор при написании и редактировании публикаций (у меня, например, визуальный вообще не работает).
Правда, если вы переключитесь в визуальный, то он этот самый код со скриптом может потереть, поэтому будьте осторожнее, либо используйте для вставки карт от Яндекса короткие коды (или произвольные поля), как — опишу чуть ниже.
Итак, для начала на странице написания или редактирования статьи в Вордпрессе нажмите на расположенную в правом верхнем углу кнопку «Настройки экрана» и поставьте галочку напротив пункта «Произвольные поля»:
Под статьей появится область с одноименным названием, где вам нужно будет нажать на «Введите новое», после чего указать в левой форме идентификатор короткого кода (латиницей и без пробелов), в правую вставить код полученный в конструкторе Yandex Maps:
Теперь открываете ваш функциональный файл functions.php (живет он в папке с используемой темой оформления, а подробнее про его возможности читайте по приведенной ссылке).
Добавьте в него приведенный чуть ниже код (но с умом и предварительно сделайте бекап, а работу эту проводите не из админки Вордпресса, а подключившись к сайту по ФТП и открыв этот файлик в Нотепаде с плюсами):
function customscript_shortcode($atts, $text) { global $post; return get_post_meta($post->ID, $text, true); } @add_shortcode('customscript','customscript_shortcode');
После этого в статью или статическую страницу можно будет вставлять код, полученный в конструкторе Яндекс карт, с помощью такой вот конструкции, где вместо «yandexmap» вставьте используемый вами идентификатор:
Теперь вам не страшен визуальный редактор, который готов порезать все, что отличается от Html кода. Ура. Если нужно вставить схему проезда в каркас блога (хедер, сайдбар или футер), то скрипт туда можно вставлять напрямую, но нужно будет выбрать нужный шаблон темы Вордпресса, чтобы карта выводилась там, где вы хотите. Про назначение шаблонов читайте по приведенной ссылке.
Для вставки API карты с Яндекса на сайт под управление Joomla можно будет использовать все тот же модуль произвольного Html кода, но предварительно отключить визуальный редактор, чтобы код опять же не порезался им. После вставки редактор можно включить взад.
Если понадобится добавить код схемы проезда в статью на Joomla, то можно просто его вставить с отключенным визуальным редактором или же вставить содержимое модуля произвольного кода с помощью возможностей плагина Load Module.
В этом случае модуль с кодом карты от Яндекса нужно расположить в несуществующую позицию шаблона (банально набрать в поле выбора позиции в настройках модуля произвольного Html кода что-нибудь типа: yandex-karta). А затем, уже при написании или редактировании статей, вы сможете вставить в нужном месте конструкцию:
{loadposition yandex-karta}
Кстати, если вдруг этот способ у вас не работает, то зайдите в менеджер плагинов (из админки Joomla, выберете пункты меню «Расширения» — «Менеджер плагинов») и найдите, а затем активируйте «Content — Load Module». Он входит в стандартный комплект поставки Joomla, поэтому он у вас должен быть в обязательном порядке.
Вот, еще стоит сказать, что выдернуть схему и вставить ее на свой сайт можно и из упомянутых чуть выше «Моих карт». Помните, я там говорил, что можно получить ссылку на сохраненную схему, кроме этого можно было получить еще и YMapsML-файл, который запросто можно прикрутить к сайту, подключив предварительно к нему API.
Для подключения Апи Яндекса достаточно будет разместить между тегов head (найти их в случае Joomla или Вордпресс можно так же, как это было описано с статье про добавление фавикона на сайт) следующий вызов скрипта:
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
Ну, а в нужном месте (где должна вставляться и выводиться схема проезда) достаточно будет вставить:
<script type="text/javascript">? ymaps.ready(function () {? var map = new ymaps.Map('YMapsID', {? center: [55.7, 37.5],? zoom: 9,? behaviors: ['scrollZoom', 'drag']? });?? //Необходимо подставить свой URL.? ymaps.geoXml.load("скопированная ссылка на YMapsML-файл")? .then(function (res) {? // Добавление загруженных из YMapsML-файла объектов на карту.? map.geoObjects.add(res.geoObjects);? });? });?</script>
Будем считать, что с созданием простейшей схемы проезда и вставкой ее на свой сайт, мы кое-как разобрались. Что же дальше? Наверное, стоит сказать пару слов о более сложных вариантах API Яндекс Карт, которые уже не подвластны упомянутому конструктору, но зато вполне по силам человеку знакомому с языком ДжаваСкрипт.
В этом случае перед вами открываются все возможности API Yandex Maps, которые описаны по приведенной ссылке. Там имеется вся необходимая документация, а девушка из этого ролика введет вас в курс дела:
Отлично, передайте эти материалы вашему программисту и он вам сварганит что-нибудь похожее на это (если в этом есть необходимость):
ktonanovenkogo.ru
"все ссылки без таржет бланк" — это не всегда удобно в первую очередь для посетителя.
http://www.ozon.ru/context/map/?areaId=2
(в верхнем правом углу)
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.Container-docpage/#enterFullscreen
только как использовать не понял еще