[YandexMaps] Создаём объекты на Яндекс Картах из ресурсов со множеством опций
YandexMaps — Компонент позволяет создавать Яндекс Карту и размещать на ней список объектов (1 объект = 1 ресурс). Можно вывести одиночный объект на карте по id ресурса.
Для добавления карты к ресурсу нужно всего лишь создать TV с типом «YandexMaps» (появится после установки компонента).
Чтобы указать местоположение объекта нужно просто кликнуть на том месте на карте в «дополнительных полях» ресурса.
Так выглядит TV поле в админке
Так выглядит карта со множеством объектов во фронтенде
Параметры
&tpl — Основной шаблон.
&tplFiltersItemsWrapper — Шаблон обёртка вывода ссылок фильтров для отображения/скрытия объектов на карте.
&tplFiltersItems — Шаблон вывода ссылок фильтров для отображения/скрытия объектов на карте.
&idMap — Id карты для html разметки и JS инициализации.
¢erCoords — Координаты для центра карты.
&zoom — Zoom карты (приближение).
&tvCoords — Имя TV поля с типом yandexMaps (в которое будем записывать координаты объекта).
&tvAddress — Имя TV поля с адресом объекта (если хотим, чтобы компонент сам определил координаты для каждого объекта по его адресу в ТВшке).
&addressPrefix — Префикс в начало адреса. Если в TV поле «tvAddress» все адреса указаны без обозначения страны и города. Например: «Россия, Москва, ».
&objectsTypesJSON — JSON строка с типами объектов, родительскими id, тайтлами, иконками или пресетами, а также субфильтрами по TV (и назначение каждому варианту ответа иконки или пресета).
&id — Id ресурса для вызова одиночного объекта на карте. Например: [[*id]].
&markerIcon — Иконка для одиночного объекта. Например: «/images/map_marker.png».
&markerPreset — Ключ стиля для одиночного объекта. Например: «islands#yellowStretchyIcon» или «islands#violetDotIcon».
&markerPresetText — Текст для одиночного объекта на preset. Например: «Плавательный бассейн».
&markerPresetFieldText — Поле, откуда извлекать текст для одиночного объекта на preset. Например: «menutitle».
&fieldForBalloonContent — Какое поле ресурса использовать для описания в balloon.
&fieldForHint — Какое поле ресурса использовать для подсказки при наведении на объект.
&showMoreLink — Ставить ли ссылку «подробнее» на ресурс в конец текста в balloonContent.
&showMoreLinkTpl — Шаблон ссылки «подробнее» на ресурс в конце текста в balloonContent.
&classMapBlock — Класс для блока карты.
&styleMapBlock — Стиль для блока карты.
&idFiltersForm — Id для формы фильтров (вкл/выкл) гео-объектов.
&classFiltersBlock — Класс для блока ссылок фильтров (вкл/выкл) гео-объектов.
&styleFiltersBlock — Стиль для блока ссылок фильтров (вкл/выкл) гео-объектов.
&classFiltersItem — Класс для ссылки фильтра (вкл/выкл) гео-объектов (нужен для отслеживания клика JSом).
Инструкция
- Установите компонент. Уже должен быть установлен pdoTools.
- Добавьте TV поле (например: «coords»), у которого на вкладке «Параметры ввода» укажите тип: «yandexMaps«:
- Укажите это поле для шаблонов, которые будут присвоены ресурсам-объектам на карте.
- Добавьте ресурс, у которого укажите шаблон, о котором говорилось выше. На вкладке «Дополнительные поля» кликните на том месте карты, на котором находится нужный объект. При необходимости воспользуйтесь поиском места на карте.
- Примерное дерево, для которого указан вызов сниппета в примерах 4 и 5 (внизу):
Пример 1 (вывод одиночного объекта используя свою иконку)
[[!yandexMaps?
&id=`[[*id]]`
&tvCoords=`coords`
&markerIcon=`/images/cafe_marker_icon.png`
&fieldForBalloonContent=`description`
&fieldForHint=`pagetitle`
&showMoreLink=`true`
]]Пример 2 (вывод одиночного объекта используя preset — «DotIcon»)
[[!yandexMaps?
&id=`[[*id]]`
&tvCoords=`coords`
&markerPreset=`islands#violetDotIcon`
&fieldForBalloonContent=`introtext`
&fieldForHint=`menutitle`
]]Пример 3 (вывод одиночного объекта используя preset — «StretchyIcon», и текст в нём)
[[!yandexMaps? &id=`[[*id]]` &tvCoords=`coords` &markerPreset=`islands#yellowStretchyIcon` &markerPresetText=`Плавательный бассейн` &fieldForBalloonContent=`description` &fieldForHint=`pagetitle` &showMoreLink=`true` ]]
Пример 4 (вывод множества объектов используя параметр «objectsTypesJSON»)
[[!yandexMaps?
&tvCoords=`coords`
&fieldForBalloonContent=`description`
&fieldForHint=`pagetitle`
&objectsTypesJSON=`[
{
"InvestProjects": {
"parent":"5",
"preset":"islands#violetStretchyIcon",
"presetText":"Реализованный",
"title":"Инвестиционные проекты"
},
"InvestPlaygrounds": {
"parent":"6",
"icon":"/images/playgrounds_map_icon.png",
"title":"Инвестиционные площадки"
}
}
]`
]]Пример 5 (вывод множества объектов с субфильтрами из TV, используя параметр «objectsTypesJSON»)
[[!yandexMaps? &tvCoords=`coords` &fieldForBalloonContent=`description` &fieldForHint=`pagetitle` &objectsTypesJSON=`[ { "InvestProjects": { "parent":"5", "icon":"/images/projects_map_icon.png", "title":"Инвестиционные проекты", "subFilters": { "status": { "title":"Статус проекта", "options": { "0":{ "value":"Реализуемый==1", "icon":"/images/projects_map_icon1.png" }, "1":{ "value":"Реализованный==2", "preset":"islands#violetStretchyIcon", "presetText":"Реализованный" }, "2":{ "value":"Подписано соглашение==3", "preset":"islands#blueStretchyIcon", "presetFieldText":"pagetitle" } } }, "branch": { "title":"Отрасль", "options": { "0":{ "value":"Фармацевтика и биотехнологии==1" }, "1":{ "value":"Автомобили и автокомпоненты==2" }, "2":{ "value":"Транспортно-логистические==3" }, "3":{ "value":"Другие направления==4" } } } } }, "InvestPlaygrounds": { "parent":"6", "icon":"/images/playgrounds_map_icon.png", "title":"Инвестиционные площадки", "subFilters": { "types": { "title":"", "options": { "0":{ "value":"Особые экономические зоны==1", "icon":"/images/playgrounds_map_icon1.png" }, "1":{ "value":"Индустриальные парки==2", "icon":"/images/playgrounds_map_icon2.png" } } } } } } ]` ]]
Скачать дополнение YandexMaps в репозитории Modstore.pro
В официальном репозитории modx.com
Добавляем Google и Яндекс карты с помощью кода
Содержание:
1. Добавляем Google карту
1.1 Простая карта с одной меткой
1.2 Многофункциональная карта с несколькими метками
2. Добавляем Яндекс карту
3. Как растянуть карту на всю ширину экрана?
4. Как выровнять карту по центру экрана?
Если вам не подходит вариант добавления карты с помощью наших стандартных виджетов, можно добавить ее через код. Основные преимущества добавления карты через код:
- Можно добавить несколько меток на карту. В отличие от стандартного виджета, где можно указать только одну метку.
- На карте есть кнопка для открытия просмотра на весь экран. В стандартных виджетах такой функции нет.
Добавить стандартный виджет карты можно по нашей инструкции:
«Kак добавить карту на страницу?»
❗Обратите внимание, что с помощью стандартных возможностей на страницу можно добавить только карту от сервиса Яндекс. Если ваши посетители будут с Украины, то у них такая карта работать не будет, поскольку на данный момент в Украине сервисы от Яндекс блокируются. Вместо Яндекс.Карты, можно подключить Google карты с помощью кода. Для добавления карты через код двигаемся дальше.
1. Добавляем Google карту
Есть 2 способа добавления Google карты.
1. Более простой вариант. Для него нужно выполнить меньше действий, но с помощью него можно поставить на карту только одну метку.
2. Более сложный вариант. Нужно выполнить больше действий и настроек, но с помощью него можно поставить несколько меток, линий и других элементов на карту.
1.1 Простая карта с одной меткой
Чтобы создать Google карту с одной меткой — зайдите на страницу Google карт. Далее выполним следующие действия:
- Шаг1. Указываем нужный нам адрес в поисковой строке и нажимаем на иконку лупы, чтобы перейти к нему
- Шаг2. Нажмите на нужно место на карте, чтобы поставить там метку. Сначала она будет маленькой и серой.
❗Если вы поставили метку на место, которое уже известно Google картам, то метка станет сразу красной и для дальнейшей настройки можно переходить сразу к шагу 4.
- Шаг3. После добавления метки, внизу карты появится адрес и координаты места, где она установлена. Нажмите на координаты метки, которые находятся под адресом
- Шаг4. Метка станет большой и красной. Далее нажмите на иконку трех полос в панели управления слева, чтобы зайти в настройки карты
- Шаг5. Нажимаем на функцию «Ссылка/код»
- Шаг6. Выбираем вариант «Встраивание карт», выбираем размер карты, в котором хотим видеть ее на странице и нажимаем на кнопку «Копировать HTML»
- Шаг7. Заходим в редактор и добавляем на страницу виджет «Вставка HTML кода».
Скопированный код карты добавляем в настройках этого виджета
Готово! Мы добавили Google карту на страницу.
❗Важно: карта будет отображаться только в предпросмотре, или на опубликованной странице, если зайти на нее по ссылке.
На самой странице такой вариант Google карты отображается так:
1.2 Многофункциональная карта с несколькими метками
Чтобы создать Google карту с несколькими метками — зайдите на конструктор Google карт. Далее выполним следующие действия:
- Нажимаем на кнопку «Создать новую карту»
- Указываем нужный нам адрес в поисковой строке и нажимаем на иконку лупы, чтобы перейти к нему
- Отметим на карте нужные нам адреса. Можно поставить несколько меток, а также по желанию добавить линии. Для этого нажмите на нужную функцию в верхней панели управления, после чего нажмите на нужное место на карте, чтобы поставить там метку или начать рисовать линию.
После добавления метки, линии или другого объекта, они также добавляются в раздел списка объектов слева (внутрь слоя). Слоев может быть несколько, и в каждом из них разные объекты. Но зачастую такой необходимости нет и вы можете оставить все объекты в одном слое, который изначально существует, и его не нужно создавать отдельно. В каком-то роде, слой выполняет функцию папки, в которой находятся объекты (объекты — это точки на карте, линии и т.д.).
Нажав на объект в списке, можно быстро перейти к нему на карте, чтобы отредактировать.
- Указываем название карты, слоя и объектов. Все эти названия будут отображаться у посетителя на карте, поэтому желательно дать им понятные названия.
Чтобы изменить название объекта — нажмите на него в меню слева, далее на иконку карандаша в настройках объекта и укажите желаемое название
Чтобы изменить название карты и название слоя, достаточно нажать на них и написать желаемое название.
- Нажимаем на кнопку «Поделиться»
Далее, на кнопку «Изменить»
Выбираем вариант «Вкл (для всех в интернете)» и сохраняем настройки
- После настройки доступа, нажимаем на иконку троеточия возле названия карты и на функцию «Добавить на сайт»
- Копируем полученный код, который отобразится после нажатия на кнопку «Добавить на сайт»
- Заходим в редактор и добавляем на страницу виджет «Вставка HTML кода».
Скопированный код карты добавляем в настройках этого виджета
Готово! Мы добавили Google карту на страницу.
❗Важно: карта будет отображаться только в предпросмотре, или на опубликованной странице, если зайти на нее по ссылке.
На самой странице Google карта отображается так:
Как мы видим, посетителям открыто название карты, которое мы указывали выше, кнопки увеличения и приближения карты и кнопка для открытия карты на весь экран. Также слева от названия карты мы имеем кнопку, по нажатию на которую, посетитель может посмотреть подробную информацию о карте. Эту информацию мы указывали выше, вместе с названием карты:
- Описание карты
- Название слоя
- Название объектов на карте (на примере ниже у нас добавлен только 1 объект — точка)
2. Добавляем Яндекс карту
Чтобы создать Яндекс карту, зайдите на конструктор карт Яндекса. Далее выполним следующие действия:
- При заходе на страницу конструктора карты, появится окно, где нужно нажать на кнопку «Создать карту»
- Указываем нужный нам адрес в поисковой строке и нажимаем на кнопку «Найти» чтобы перейти к нему
- Отметим на карте нужные нам адреса. Можно поставить несколько меток, а также добавить линии. Для этого нажмите на нужную функцию в верхней панели управления, после чего нажмите на нужное место на карте, чтобы поставить там метку или же начать рисовать линию.
После добавления метки или линии, они добавляются в раздел «Список объектов» слева
Чтобы редактировать уже добавленные метки, нажмите на нужную метку в этом списке, который отображается слева (нажать именно в списке, а не на саму метку, которая расположена на карте).
- Указываем название и описание нашей карты. После чего нажимаем на кнопку «Сохранить и продолжить»
- Выбираем вариант «Вставить на сайт» и «Интерактивная карта»
Интерактивную карту посетитель сможет приблизить/отдалить и двигать ее, чтобы сориентироваться в местности. Если выбрать вариант «Статическая карта» вместо интерактивной, то она будет отображаться на странице в формате картинки и с ней невозможно будет взаимодействовать.
- Указываем размер карты (ширину и высоту), в котором хотим добавить ее на страницу. Если хотите, чтобы карта была по всей ширине экрана — включите функцию «Растянуть по ширине». На самой карте, справа, будет выделяться область, которая отобразится на сайте.
Также можно не указывать размер вручную, а потянуть за край области в нужную сторону, чтобы сделать ее меньше или больше
- Нажимаем на кнопку «Получить код карты»
- Выберите вариант подключения карты (через JavaScript или iframe) и скопируйте полученный код
Оба способа будут работать, но визуально карта будет немного отличаться, в зависимости от того, какой способ выберите.
При подключении через JavaScript мы видим в правом верхнем углу карты есть кнопки, чтобы изменить слои карты (отображение карты со спутника или в виде схемы) и открыть карту на весь экран.
Если подключить через iframe, то кнопок смены слоя и открытия карты на весь экран не будет.
- Заходим в редактор и добавляем на страницу виджет «Вставка HTML кода».
Скопированный код карты добавляем в настройках этого виджета
Готово! Мы добавили Яндекс карту на страницу.
❗Важно: карта будет отображаться только в предпросмотре, или на опубликованной странице, если зайти на нее по ссылке.
3. Как растянуть карту на всю ширину экрана?
По умолчанию заданы определенные значения высоты и ширины карты, но мы их можем изменить в редакторе:
В полученном коде необходимо изменить значение width (это ширина карты) на 100%
Пример: width=»100%» Теперь ширина карты у нас будет растягиваться на всю ширину виджета “html код”.
Изменяя значение height вы измените высоту карты на странице.
На примере ниже, укажем ширину карты (width) на всю ширину экрана, т.е. со значение 100%. И высоту 480 (в пикселях).
❗Важно: при таких настройках, карта будет растягиваться по всей ширине виджета «HTML код», но еще не по всей ширине экрана.
Для того чтобы растянуть границы виджета с картой на всю ширину экрана, необходимо зайти в настройки секции, внутри которой мы добавили карту, и в разделе «Параметры» включить функцию «Растянуть по ширине экрана»
Готово! Теперь наш виджет с картой растянут от края до края экрана.
Проделаем тоже самое на записи:
- Проверим в предпросмотре, как отображается карта
- Изменим значение ширины карты на 100%, через код
- Растянем секцию с картой по ширине экрана
- Проверим результат в предпросмотре
4. Как выровнять карту по центру экрана?
Код (с картой) по умолчанию будет выравниваться по левому краю, если не задано выравнивание по центру. Это значит, что и сама карта будет отображаться в левой части экрана.
Для того чтобы разместить нашу карту по центру, необходимо прописать тег <center> до нашего кода с картой и тег </center> после кода с картой.
Пример:
<center> код карты </center>❗Если у карты установлена ширина 100% (как мы настраивали выше, в разделе «Как растянуть карту на всю ширину экрана?») — она изначально будет отображаться по центру.
Как подключить и использовать карты Яндекс и Google в Tableau: пошаговая инструкция
В этой статье мы расскажем, как привязать карты Google или Яндекс.Карты в Tableau и как с ними работать. Для этого мы будем использовать источник данных Sample – Superstore, встроенный в Tableau.
Вы знали, что в Tableau Online можно отобразить карты в виде интерактивной «веб-страницы» и все данные на этой странице будут кликабельны (так же, как в Гугл и Яндекс-картах)? Это еще один отличный способ визуализировать данные:
- можно посмотреть карту местности
- или фотографии объекта со спутника
- увидеть ситуацию на дорогах
- узнать все контактные данные по какой-нибудь компании
- в общем, теперь в Tableau можно сделать все, то что вы обычно делаете в картах, но еще и с привязкой к аналитическим данным.
Как это сделать? Читайте ниже. Мы привели пример использования карты Google. В случае с Яндекс.Картами последовательность действий будет абсолютно такая же (см. пример в финале статьи).
Как Google Maps в Tableau
Прежде чем использовать Google Maps (Яндекс.Карты) в Tableau, давайте создадим символьную карту (Symbol Map). Для этого перетащите из вкладки Dimensions поле Postal Code на карточку Details, находящуюся на полке Marks.
Теперь вы можете видеть автоматически сгенерированную символьную карту.
Добавим Count (Quantity) на карточку Size. Таким образом, размер кружков будет зависеть от числа заказов.
Как использовать Google Maps в Tableau Worksheets
Для того чтобы использовать Google Maps, перейдите на вкладку Worksheet и из выпадающего меню выберете Actions…
После того как вы выбрали Actions…, появится окно, показанное ниже.
Нажмите кнопку Add Action и выберете URL…
После выбора URL откроется окно Add URL Action
• Source Sheets: Выберете лист, с которого вы хотите выполнить действие, т.е. показать Карту.
• Hover: Если вы выберете эту опцию, Карта откроется, когда вы наведете курсор на определенную точку на текущей карте.
• Select: Если вы выберете эту опцию, Карта откроется, когда вы выберете определенную точку на текущей карте.
• Menu: Используйте меню, чтобы открыть Карту.
• URL: Укажите конкретный URL…
Мы назвали это действие Google Map, использовали для листа Google Maps, и это действие будет выполнено при выборе точки на карте. URL, который нужно использовать: https://www.google.com/maps/?q=
Кликните боковую стрелку, чтобы выбрать широту и долготу (Latitude и Longitude).
Как видно, у нас нет какой-либо существующей широты и долготы как в Dimensions, так и в Measures. Если в источнике хранилища данных они имеются – выберете их.
Как использовать Google Maps в Tableau DashboardПеред тем как начать использовать карты Google в Tableau Dashboard, создадим сам дашборд.
Затем, мы добавили лист Google Map, созданный ранее для этого дашборда.
Затем, перетащите веб-страницу (Web Page) из области Objects на нижнюю часть дашборда.
Перетаскивание Web Page откроет окно Edit URL. Оставьте его пустым или введите URL, который будет использован по умолчанию, и кликните OK.
Теперь вы можете видеть на дашборде одну символьную карту и веб-страницу.
Чтобы использовать Google Maps в дашборде, перейдите во вкладку Dashboard и выберете из выпадающего меню Actions…
После выбора Actions.., откроется показанное ниже окно. Здесь, нажмите Add Action и выберете опцию URL…
После выбора опции URL откроется окно Add URL Action. Мы уже объяснили эти свойства в прошлом примере. Здесь мы назвали действие Google DB Map, и оно будет срабатывать при выборе точки. URL, который нужно использовать https://www.google.com/maps/?q=
Кликните по боковой стрелке, чтобы выбрать широту и долготу. Как видно, мы выбираем широту, которая была автоматически сгенерирована Tableau, когда мы добавили Postal Code на карту.
Аналогично добавьте долготу в URL. Теперь URL будет выглядеть так: https://www.google.com/maps/?q=<Latitude(generated)>,<Longitude(generated)>.
Кликните OK, чтобы закрыть окно.
Выберете Лос-Анджелес на карте и вы сможете увидеть карту Google для выбранного почтового индекса. Если в данных есть подходящий адрес, то соответствующее здание также будет показано.
Выбрав местоположение, вы сможете увидеть всю информацию об объекте так, как эти данные отображаются на веб-странице.
Посмотрите на визуализацию ниже.
И вы даже сможете посмотреть на City hall.
Вы также можете выбрать вид со спутника.
Аналогичным образом, пройдя все необходимые шаги выше, можно добавить Яндекс.Карты. См. пример ниже: пробки на дорогах в режиме онлайн.
- Если у вас есть вопросы по Tableau напишите нам — и мы расскажем вам о продукте подробнее. Мы любим отвечать на вопросы и знаем все про Tableau
- Еще можно изучить Tableau самостоятельно — скачайте бесплатную версию и получите обучающие материалы:
Как добавить фото на Яндекс Карты
Важная информация
Чтобы добавлять фотографии, писать отзывы и ставить оценки в Яндекс.Картах, необходимо войти в систему с помощью аккаунта Yandex. О том, как создать учетную запись, подробно написано в отдельной статье.
Подробнее: Как зарегистрироваться в Яндексе
Фото, отправленные через мобильное приложение, перед публикацией проходят проверку на достоверность, наличие ошибок и др. На это требуется определенное время. И только после успешной модерации снимки попадают на Яндекс.Карты и другие сервисы.
По информации от службы поддержки Яндекса добавлять фотографии можно только к коммерческим зданиям. При этом возможность привязки снимков к любым объектам они готовы рассмотреть, но ничего конкретного пообещать не могут.
Добавление фото с компьютера
Привязать фотографию к организации можно с помощью сервиса Яндекс.Карты.
Перейти к сервису Яндекс.Карты
- Открываем сервис, находим нужную локацию и в карточке описания к ней переходим во вкладку «Фото».
Если нужно авторизоваться, тапаем иконку «Меню», а затем «Войти».
Вводим данные учетной записи и подтверждаем вход.
- Откроется блок с фотографиями, уже привязанными к этому месту. Чтобы добавить новые, жмем соответствующую иконку.
- Снимки можно просто перетащить в специально предназначенное для этого поле или найти в памяти компьютера. В данном случае нажимаем «Выберите на компьютере».
- Находим подходящий снимок и подгружаем его.
- Когда все фото будут подготовлены, кликаем «Отправить».
- Дополнительно можно оценить место и добавить комментарий. Если такой необходимости нет, просто закрываем окно.
Ждем, когда фотографии опубликуют.
Добавление фото с мобильного устройства
Другой способ – добавить снимок с помощью мобильного приложения Яндекс.Карты.
Скачать Яндекс.Карты из Google Play Маркета
Скачать Яндекс.Карты из App Store
- Открываем прикладную программу, находим нужный объект, прокручиваем экран вниз и в блоке с фотографиями тапаем «Добавить фото».
- Чтобы сделать фотографию на месте, жмем иконку с изображением фотокамеры и делаем снимок.
Либо жмем «Галерея» и выбираем файл из памяти смартфона.
Ждем, когда снимки пройдут модерацию.
Приложение «Народная карта»
С помощью этого ПО можно создавать и привязывать к картам снимки своих пеших и автомобильных маршрутов. Это те же панорамы, только созданные пользователями. Снятые через приложение материалы также отправляются на модерацию, после которой принимается решение об их публикации.
Скачать «Народная карта» из Google Play Маркета
- Открываем приложение, щелкаем «Заснять маршрут», разрешаем ПО использовать камеру и геолокацию, читаем рекомендации для получения качественных снимков и тапаем «Продолжить».
- Когда включится камера, ее нужно сфокусировать. Для этого нажимаем «Начать съемку» и жмем на какой-нибудь удаленный объект.
- Чтобы отключить запись, тапаем иконку «Стоп».
- Выходим на главный экран и жмем «Выгрузить на карту». Модерация занимает несколько часов.
- Опубликованный маршрут можно посмотреть в сервисе Яндекс.Карты. Для этого жмем иконку «Зеркала», чтобы на карте синим цветом отобразились все доступные записи, и слева выбираем тип маршрута – автомобильный или пеший.
- Щелкаем мышкой на том отрезке, где использовали приложение. Откроется самый последний записанный маршрут.
- Просмотреть фото можно вручную с помощью стрелок вверх и вниз, либо нажав «Воспроизвести», чтобы они пролистались автоматически.
- Сервис хранит все опубликованные записи. Чтобы потом найти свою, жмем «Другие снимки» и в списке ищем маршрут по конкретной дате.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТКак встроить Яндекс и Google карты на сайт
Существует множество способов привлечения новой аудитории для вашего проекта, если он связан с торговлей в офлайне. Например, размещение карты для проезда к вашей торговой точке или к офису в контактных данных вашего сайта.
От статики к динамике
Раньше подобные схемы рисовали веб-разработчики, и подобная работа составляла неотъемлемую часть услуг в процессе создания сайта. При каких-либо изменениях в работе картинку со схемой приходилось менять заново. Ни о какой интерактивности и речи не было — клиент не имел возможности менять масштаб, оценить возможные маршруты, время проезда к месту, да и подобные карты не отличались особой точностью. Создавать карты было трудоемко, а пользоваться ими неудобно.
Изменить ситуацию удалось с помощью Google Maps а также Яндекс.Карты, имеющие огромные преимущества, среди которых стоит отметить:
- своевременное обновление
- простота использования
- возможность интеграции данной схемы с поисковиками.
- и все это не требует оплаты
Данные особенности обеспечивают большую популярность таких карт по сравнению с традиционными рисованными схемами проезда. Следует учитывать важный фактор: обновление карт происходит не каждый день, так как сервисы не могут мгновенно их править и все изменения нуждаются в проверке. Пользователи могут сообщать о неточностях карт, или о появлении новых объектов.
После проверки информации и накопления значительного числа правок система производит апдейт, то есть обновление базы данных. Так что все пользователи сервиса могут принять участие в улучшении качества карт. Простая, но гениальная идея – привлекать помощь клиентов для улучшения своего продукта.
Продвижение проекта с помощью схемы проезда
Посмотрим, какие же преимущества мы можем выиграть для продвижения своего сайта, используя эти инструменты от Гугл и Яндекс. Необходимо отметить, что поисковые сервисы карт Google и Яндекс имеют два совершенно разных вида HTML-кода для встраивания карты на сайт:
- Использование простой карты без указания организации, пригодно только для некоммерческих целей и лишь для информации, к примеру, можно встроить карту в блог, чтобы поделиться с друзьями местом для проведения вечеринки, для чего можно просто указать нужное место отметкой и использовать полученный код для дальнейшей вставки. Такая карта не привязана к остальным сервисам поисковика и ее создание не составит никакого труда.
- Использование карты с привязкой к конкретной организации необходимо для всех интернет-маркетологов, SEO-оптимизаторов и продвигающих свой проект в сети людей. Так как картографические сервисы систем Яндекс и Google являются неотъемлемыми частями огромных поисковиков, то они напрямую влияют на процесс отображения поисковых запросов и предоставляют пользователям другие «бонусы».
Например, даже в некоторых конкурентных нишах не все пользуются этими сервисами, а вы можете воспользоваться этим, чтобы ваша карта попала в поисковую выдачу. Для получения от сервиса такой улучшенной карты необходимо будет также подтвердить правильность указанной пользователем информации с помощью выбранной системы.
Преимущества карт с привязкой к компании
Итак, посмотрим на результаты работы поисковика на примере компаний, имеющих привязку к Google Maps или «Яндекс.Карты». Каждый картографический сервис обладает своими характерными преимуществами. «Яндекс.Карты» располагаются сразу после специально размещенных объявлений «Яндекс.Директ» и, что самое интересное для нашего сайта, – до обычной выдачи поискового результата. Реклама выделяется желтым цветом.
Характерной особенностью Google в отличие от «Яндекса» является большая «социализация» результатов поиска, то есть все ориентировано на пользователя. Карта в углу зафиксирована и будет видна также при скроллинге. На карте видны все точки соответствующие запросу, а в выдаче находятся помеченные Google Maps результаты, обозначенные на карте буквами.
- Во время скроллинга карта остается на месте.
- К тому же, к каждому найденному адресу авторизованные пользователи поисковой системы Google могут оставлять отзывы и комментарии, аналогично сервису «Яндекс.Маркет».
Следовательно, привязка нашего сайта организации к карте обеспечивает нам дополнительные преимущества для поискового продвижения и большее число переходов из поисковика на сайт. Причем такой трафик имеет высокое качество, то есть значительное число посетителей станут клиентами.
Технические вопросы
Для начала необходимо определиться с выбором конкретного сервиса: либо Google Maps либо «Яндекс.Карты». Нужно иметь в виду, что карты разных систем отличаются по виду HTML-кода для встраивания в сайт. Google ведет работу своих карт с помощью <iframe>, таким образом он всегда правильно отображается, так как полностью использует код страниц Google. Но не все сайты имеют возможность вставки подобного объекта, в особенности на блогоплатформах. Особенностью же кода карт «Яндекса» является возможность их вставки блочно, с помощью элементов JavaScript и <div>, что ставит его в зависимость от применяемых на сайте стилей. Кроме того, Яндексом были разработаны плагины для популярных CMS.
Также, «Яндекс» может сохранять карту в образе статической картинки с простым кодом для ее вставки. Выбор стоит делать исходя из возможностей и особенностей сайта, на чьей странице нужно разместить карту. Так как «Яндекс» является российской компанией, то и его карты точнее и понятнее для русскоговорящей аудитории, чем карты Google. Некоторые надписи на гугловских картах выполнены в виде транслита, что затрудняет восприятие информации и ориентирование на местности.
Так даже Google карты центра Москвы до сих пор содержат некоторые неточности в названиях, на них не обозначены трамвайные пути и другие особенности, полезные в описании встраиваемой на сайте карты. К тому же, стоит отметить, что техподдержка «Яндекса» гораздо более оперативна, чем у Google, и реакция на обращения довольно быстрая.
На чем остановить свой выбор: Google Maps или «Яндекс.Карты»?
Каждая система имеет свои плюсы и минусы, свою специфику работы и особенности. Разумным будет продвигать свой проект с помощью сервисов карт обоих поисковых систем. В таком случае можно получить больше трафика на свой сайт. Считается, что около двух третей запросов поиска в рунете приходится на «Яндекс», таким образом целесообразнее прежде всего опираться на продвижение в системе «Яндекс», но важное значение имеет с какого поискового ресурса идет больше трафика на ваш сайт.
Оптимальнее будет использовать карты обеих поисковых систем — и Google, и «Яндекс», так как заранее не известно, пользователи какого поисковика будут посетителями вашего сайта. Можно одну из карт изобразить в виде фотоснимка со спутника, а другую — как схему проезда. Так же не стоит забывать и о словесном описании карты для удобства ориентации пользователей, с указанием основных ориентиров на местности, остановок транспорта и т.д.
Как было указано ранее, у «Яндекс» и Google существует два способа добавления карт на сайт: с привязкой и без привязки к организации. Упрощенным способом, без привязки, можно отметить на карте место или проложить маршрут, и разместить карту на своем сайте без необходимости подтвердить достоверность указанной информации. Более сложный способ, подразумевающий под собой привязку сайта организации к месту на карте, влечет за собой необходимость подтвердить изложенную контактную информацию в «Google Адресах» или права на вебсайт в «Яндекс.Вебмастер» соответственно.
Данный способ производит не просто регистрацию точки на карте, но и адреса вашей компании, а также привязывает к другим сервисам поиска в пределах этого поисковика, таким образом в качестве рекламы его польза более ощутима.
Легкий способ установки Google карты на сайт
Для создания и возможности редактирования карты в Google Maps необходимо быть авторизованным пользователем системы Google, для чего нужно иметь аккаунт в данном поисковике. Откройте на главной странице системы Google в верхней строчке ссылку «Карты», таким образом вы перейдете на страницу Google Maps.
- Для создания своей карты вам потребуется нажать на ссылку «Мои карты» и кликнуть мышкой пункт меню «Создать карту».
- Выбираем желаемый тип отображения карты. Под строкой поиска доступна кнопка «Добавить метку» а также меню для рисования линий, которыми следует пользоваться для создания карты. Для удобства редактирования можно использовать линейку изменения масштаба карты.
- Тут нужно ввести название вашей карты, а затем ее описание. С помощью кнопки «Сохранить» создание карты не оканчивается, а только сохраняется предварительный результат.
- Для возможности свободного доступа к карте ее нужно настроить соответствующим образом.
- Устанавливаем соответствующие права доступа.
- Определенным пользователям можем дать права на редактирование карты.
- Для получения HTML-кода следует нажать в правом верхнем углу крайнюю правую кнопку «Поделиться».
- Вводим название
- У бесплатного аккаунта есть свои ограничения — доступно до 2500 просмотров в день и это нужно учитывать, если ваш проект активно развивается и набирает много посетителей.
- Выбираем пункт меню «Добавить на сайт»
- В коде карты будет содержаться элемент <iframe>, так что вам необходимо убедиться в поддержке вставки подобных объектов на вашем сайте, странице соцсети или блоге.
Легкий способ установки «Яндекс» карты на сайт
Для вставки карты «Яндекс» необходимо иметь аккаунт в этой системе. Под строкой поиска на заглавной странице «Яндекса» находится ссылка «Карты», нажав на которую происходит переход на сервис этого поисковика «Яндекс.Карты».
- Над картой, в правом верхнем углу экрана, располагается ссылка меню «Ссылка на карту», где следует выбрать соответствующий способ размещения карты.
- В новой версии Яндекс.Карты размещение их объектов на сайте доступно через API сервиса. Ссылка на это API находится в левом сайдбаре.
- Вот так выглядит текущая версия сервиса, предоставляющего API Яндекс.Карты.
Далее вы перейдете на страничку «Конструктор схем проезда». Воспользуйтесь подсказками: сначала отметьте и подпишите места на карте, при необходимости с помощью линий изобразите способы проезда к этим местам. Справа находится колонка для помощи, где описывается функционал, необходимый для рисования вашей карты. Можно указать несколько способов подъезда к вашему зданию, менять масштаб карты, растягивая её за уголок справа внизу карты. После завершения клацните на «Просмотр».
Следующим шагом будет просмотр внешнего вида вашей карты. Всё ли на ней верно? Если ошибок не обнаружено, то следует отметить тип сайта, на котором планируется дальнейшее размещение этой карты (блоги используют статические карты, а сайты — динамические, интерактивные). По завершению данного этапа следует перейти к третьему шагу — получению кода для вставки карты. Перед вами откроется страничка с кодом для вставки, который необходимо скопировать и вставить в то место на страничке вашего веб-сайта, где нужно разместить карту.
Данный код имеет элементы JavaScript, так что вам следует удостовериться в том, что движок вашего веб-сайта поддерживает работу с подобными объектами. Как создать схему проезда с привязкой карты к сайту компании с помощью сервисов Google Maps и Яндекс.Карты мы рассмотрим в следующих статьях.
Вывод
В пределах одной поисковой системы все сервисы тесно интегрированы, таким образом местоположение вашей компании будет доступно не только в поисковой выдаче, но и на других ресурсах. В дальнейшем связи будут укрепляться, так что для достижения успехов в продвижении вашей организации надо как можно более подробно указать всю доступную информацию, включая адрес, схемы для проезда, виды деятельности вашего бизнеса. Чем более точная информация вами указана, тем лучших результатов можно достичь.
Конвертация пользовательской карты из сервиса Яндекс.Мои Карты в shape-формат
Как получить и сконвертировать данные из яндекс.мои карты
Обсудить в форуме Комментариев 25
Проекты Яндекса используют для обмена географическими данными формат YMapsML. YMapsML представляет собой открытый XML-формат, прикладная схема GML. Для редактирования данных в формате YMapsML можно использовать любой текстовый редактор.
Допустим есть карта с точечными объектами созданная в сервисе Яндекс.Мои Карты. У нас есть ссылка на веб-страницу, но мы хотим получить использованные в ней точки оффлайн в виде shape-файла или в любом другом формате.
Пример карты: http://maps.yandex.ru/-/CVf-ixq
1. Определяем уникальный идентификатор карты
Для этого, нажимаем на «Ссылка на эту карту». В появившемся окне копируем первую ссылку:
http://maps.yandex.ru/?um=KHThAyccokjTKiOCfmQLkGcj0s1FGXk3&l=map
Из нее нам нужно значение параметра um, между um= и следующим &1, в нашем случае KHThAyccokjTKiOCfmQLkGcj0s1FGXk3.
2. Получаем исходные данные в формате GML
Для получения данных в формате GML для этого карты, используем сервис экспорта Яндекс (источник, глава «Использование YMapsML), для этого формируем строку, состоящую из «http://maps.yandex.ru/export/usermaps/» к которой добавляем полученный идентификатор:
http://maps.yandex.ru/export/usermaps/KHThAyccokjTKiOCfmQLkGcj0s1FGXk3/
Открываем получившийся адрес в браузере и сохраняем результат в файл с расширением GML (File\Save page as…).
3. Конвертируем в ESRI Shape
Данные формате YMapsML могут быть обработаны программными средствами, работающими с GML третьей версии. Здесь мы используем инструмент ogr2ogr входящий в пакет GDAL/OGR, установить этот пакет можно с помощью OSGeo4W.
ogr2ogr views.shp views.gml
Полученный shape-файл готов к использованию в ГИС.
Обратите внимание, что кодировка атрибутивных данных — UTF8, система координат WGS84.
Следует помнить про ограничения формата DBF, в котором хранится атрибутика shape-файлов. Названия полей — не более 10 символов, содержание — не более 255. Таким образом имя поля description будет обрезано до descriptio.
Обсудить в форуме Комментариев 25
Ссылки по теме
Последнее обновление: December 20 2010
Дата создания: 20.11.2010
Автор(ы): Максим Дубинин
Как вставить Яндекс карту на Joomla сайт
В этом статья я расскажу как установить модуль Яндекс карт на свой Joomla сайт. Модуль позволит вам добавить карту в материал или прикрепить ее к какой-нибудь позиции шаблона. Задать ширину, высоту и тип карты. Добавить метки по указанными адресам, а также определить их внешний вид.
1. Скачайте модуль яндекс карт.
2. Откройте в панели администратора раздел «Расширения->Менеджер расширений» («Extensions->Extensions manager») и установите модуль на вкладке «Загрузить из пакета».
3. В разделе «Расширения->Менеджер модулей» («Extensions->Module manager»), найдите модуль яндекс карт (он называется «Yandex map«) и откройте его.
4. Найдите вкладку «Добавить метки» («Add markers»). Здесь вы можете задать координаты вашего объекта, для этого достаточно ввести адрес в произвольной форме и они определятся автоматически. При необходимости, вы можете оставить поле адреса пустым и ввести координаты вручную. Далее можно задать свой цвет метки (в HEX кодировке) и заполнить поле дополнительной информации. Оно будет показано посетителям сайта при клике на иконку объекта.
5. В основной вкладке «Модуль» («Module») вы можете задать масштаб, тип карты и метки. Также определить способ выравнивания карты на странице и ее размеры (если в поле ширина стоит «auto» яндекс карта будет растянута на всю ширина материала/блока в котором она располагается).
6. Если вы хотите отображать карту в определенной позиции шаблона, то вам необходимо указать ее в настройках. Далее во вкладке «Привязка к пунктам меню» («Assigments») указать страницы, на которых она будет отображаться и опубликовать модуль.
7. Если вы хотите выводить модуль yandex maps непосредственно в материале, например на странице контактов, то откройте в менеджере материалов выбранную страницу в редакторе. И вставьте название модуля в фигурных скобках в нужном месте: {loadmodule mod_yandex_map}
На этом все, ниже представлена подробная видео-инструкция по установке и настройке модуля Yandex map.
vue-yandex-map — npm
импорт YandexMap из vue-yandex-map
Vue.use (YandexMap, {
версия: ‘2.1’,
lang: ‘ru_RU’,
apiKey : »,
});
экспорт по умолчанию {
name: ‘app’,
data () {
return {
map: null,
map_data: [],
mapObjectManager: null
}
}
методы: {
yamapReady: function () {
},
mapCreated: function ($ map) {
console.info (‘mapCreated, $ map =’, $ map)
this.map = $ map
this.mapObjectManager = new ymaps.ObjectManager ({
clusterize: false,
gridSize: 60,
clusterMinCluster : 5,
clusterHasBalloon: true,
geoObjectOpenBalloonOnClick: false
})
this.map.behaviors.disable (‘drag’)
this.map.events.add ([‘click’], function () {
this.mapObjectManager.objects.balloon.close ()
})
},
mapDestroy: function ($ map) {
console.info (‘mapDestroy’)
},
regionChanged: function ($ Координаты, $ polygon) {
console.info (‘regionChanged, Coord =’, $ координаты)
пусть visibleID = [];
if (typeof $ polygon === ‘undefined’) {
$ polygon = null;
}
это.map.behaviors.disable (‘перетащить’);
this.mapObjectManager.setFilter (функция (объект) {
let in_poligon = $ polygon === null? False: $ polygon.geometry.contains (object.geometry.coordinates);
let visible = $ polygon === null? true: in_poligon;
if ($ polygon! == null && in_poligon) {
visibleID.push (объект.id)
}
return visible
})
console.log (‘карта, ID выбранной точки’, visibleID)
}
}
}
Маркеры Яндекс Карты для ZOO
Начало работы
Подробная документация по элементу «Маркеры Яндекс карты» для ZOO. Элемент имеет широкие настройки и легко настраиваемую структуру и может выделять каталог или веб-сайт, основанный на Joomla! и зоопарк.
Установка
Элемент Yandex Map Markers для ZOO можно установить как обычный Joomla! расширение через Менеджер расширений. Перейдите в бэкэнд > Менеджер расширений> вкладка Загрузить файл пакета > Загрузить и установить расширение Joomla .
После успешной установки пакета необходимо перейти в панель администрирования ZOO и настроить элемент.
Конфигурация
Открыть стартовую страницу ZOO в Joomla! back-end и откройте диспетчер приложений (щелкните значок конфигурации):
http: // ваш_сайт.com / administrator / index.php? option = com_zoo & controller = manager
Затем выберите свое приложение (например, блог), в которое вы хотите добавить элемент карты.
http://your_site.com/administrator/index.php?option=com_zoo&controller=manager&task=types&group=blog
Слева вы увидите первый столбец под названием Name. Убедитесь, для какого имени вы хотите настроить элемент. Пусть будет статья. Наведите курсор на это имя, и над ним вы увидите ссылку Изменить элементы. Нажмите здесь.
http://your_site.com/administrator/index.php?option=com_zoo&controller=manager&group=blog&task=editelements&cid%5B%5D=article
Появился элементный менеджер. Справа вы найдете библиотеку элементов и группу под названием NorrNext. Нажмите там на пункт «Маркеры Яндекс-карты», и новый элемент только что был добавлен и появился слева.
Если вы новичок в ZOO CCK, прочтите это руководство: Назначение элементов ZOO приложениям.
Рассмотрим настройки Яндекс Карт для ZOO:
Параметры элемента Маркеры Яндекс карты:
Конфигурация элемента Настройки элемента в режиме редактирования элемента- Повторяемый — [Нет / Да] — Установите Да, если вам нужно несколько экземпляров элемента в одном элементе
- Язык карты — Поддерживаемые языки: [английский / русский / украинский / турецкий]
- API-ключ — [sting] — Введите API-ключ Яндекс карты
- Отладка — [Нет / Да] — Специальный режим отладки для загрузки карты js (для разработчиков)
- Высота карты (пикселей) — Высота карты в пикселях
- Вес карты (пикселей) — Вес карты в пикселях.Установите 0, если вам нужна 100% ширина (полный экран).
- Масштаб карты по умолчанию — Установить масштаб карты по умолчанию
- Максимальный масштаб карты — Установить максимальное масштабирование карты
- Мин. Масштаб карты — Установить минимальное масштабирование карты
- Тип карты по умолчанию — Тип карты по умолчанию: [Карта / Спутник / Гибрид / Публичная карта / Публичная гибридная карта] [2]
- Карта перетаскивается — [Нет / Да] — возможность перетаскивать карту с помощью мыши
- Масштабирование карты двойным щелчком — [Нет / Да] — Масштабирование карты двойным щелчком левой кнопки мыши
- Масштаб прокрутки карты — [Нет / Да] — Масштаб прокрутки карты (прокрутка)
- Масштабирование карты MultiTouch — [Нет / Да] — Масштабирование карты MultiTouch
- Лупа правой кнопки мыши — Лупа правой кнопки мыши [Нет / Да]
- Лупа левой кнопки мыши — Лупа левой кнопки мыши [Нет / Да]
- ** Панель управления картой: **
- Нет — Параметры ширины / высоты не определены.
- Средний набор карт по умолчанию — Средний набор карт по умолчанию для средних карт (от 300 до 1000 пикселей в ширину)
- Маленькая карта по умолчанию — Маленькая карта по умолчанию для маленьких карт (менее 300 пикселей в ширину)
- Большой набор карт по умолчанию — Большой набор карт по умолчанию для больших карт (более 1000 пикселей в ширину)
- Пользовательская панель управления — Здесь вы можете настроить свои пользовательские параметры ширины / высоты.
- Геолокация — [Нет / Да] — позволяет определять местоположение пользователя, вызывая стандартную функцию геолокации вашего браузера или / и по IP-адресу пользователя.
- Поиск — [Нет / Да] — Поиск географических объектов по названию, адресу или по географическим координатам.
- Размер Поиск на панели управления — Размер элемента поиска [Маленький / Средний (по умолчанию) / Большой]
- Редактор маршрута — Редактор маршрута [Нет / Да]
- Трафик — Включить трафик на карте [Нет / Да].Этот элемент имеет 2 вида: подробный (для больших карт) с расширенной информацией и возможностью просмотра статистики и прогнозов и маленький (для маленьких карт), который имеет кнопку для включения / выключения дорожной информации.
- Размер трафика панели управления — Выберите размер трафика панели управления [Маленький / Средний (по умолчанию) / Большой]
- Выбор типа — Выбор типа [Нет / Да]
- Выбор типа панели управления размером — Выбор типа панели управления размером [Маленький / Средний (по умолчанию) / Большой]
- Полноэкранный режим — Кнопка для включения полноэкранного режима [Нет / Да].После нажатия на эту кнопку карта будет отображаться во всем окне браузера.
- Zoom — [Нет / Да] — Изменение коэффициента масштабирования.
- Размер Панели управления Масштабированием — Размер Панели управления Масштабированием [Маленький / Средний (по умолчанию) / Большой]
- Линейка — Показать линейку [Нет / Да]. Отображает масштабный сегмент на карте и кнопку поведения линейки. Позволяет измерять расстояние между объектами.
Добавление маркеров
Если вы установили для параметра «Повторяемость» значение «Да» в параметрах элемента, то вы можете добавить несколько маркеров на карту.
Добавление маркеров в зоопарк элементМаркер карты имеет следующие параметры:
- Перетаскиваемый — режим перетаскивания [Нет / Да] [1]
- Участие в маршруте — Включите этот параметр, если вы хотите использовать маркер как часть маршрута.
- Имя Маршрут — Необязательный параметр. Это может быть очень полезно, если вам нужно создать несколько независимых маршрутов. В таком случае вы просто устанавливаете имя маршрута и используете это имя для группировки маркеров, которые являются частью маршрута.Если вы не зададите имя для маршрута, оно будет сгенерировано автоматически и присвоено всем маркерам маршрута, и маршрут будет составлен.
- Значок типа — Значок типа [Значок / Значок в виде точки / Значок в виде круга / Значок в виде круга]
- Цвет значка — Установить цвет значка. Вы можете использовать те же символы, что и в CSS (rgb, hsl, hex)
- Подсказка — Подсказка при наведении курсора на значок. HTML-теги не допускаются.
- Воздушный шар — Описание, которое появляется при нажатии на значок маркера.Здесь вы можете использовать HTML-теги.
Определение координат на карте (на русском языке) — здесь вы можете ввести название места и получить координаты или наоборот.
! ВАЖНО! Ограничения:
Несмотря на то, что мы выпустили настройки для построения запроса API, есть некоторые ограничения:
- 1. Вы не можете использовать несколько карт на одной странице, которые имеют разные значения для следующих параметров: язык карты, ключ API, отладка, поскольку это противоречит принципам использования карты.Hovewer, вы можете изменить эти параметры на разных страницах. Если вы используете несколько карт на одной странице, то следующие параметры: язык карты , ключ API , отладка должны быть одинаковыми для всех карт, используемых на одной странице.
- 2. Мы не рекомендуем использовать более 10 маршрутов на одной странице.
- 3. Пожалуйста, ознакомьтесь с Условиями использования Яндекс Карт перед их использованием.
Компонент Яндекс Карты для VueJS-Codespots.com
vue-yandex-maps — это плагин для vue.js, который добавляет пользовательский элемент yandex-map.
vue-yandex-maps — это плагин для vue.js, который добавляет пользовательский элемент yandex-map.
npm install vue-yandex-maps --save
Вы можете определить конфигурацию для карты:
const options = {// вы можете указать свой apiKey, язык и версию или пропустить это.
apiKey: 'xxx',
lang: 'ru_RU',
версия: '2.1'
}
Глобальная регистрация
импортировать YmapPlugin из 'vue-yandex-maps'
Vue.используйте (YmapPlugin, параметры)
Или для одного экземпляра
импортировать {yandexMap, ymapMarker} из 'vue-yandex-maps'
новый Vue ({
компоненты: {yandexMap, ymapMarker}
})
<яндекс-карта
: options = "options"
>
Модуль Nuxt
Добавьте vue-yandex-maps / nuxt в раздел модулей файла nuxt.config.js
{
модули: ['vue-yandex-maps / nuxt', параметры]
}
Прямое включение
Вы можете использовать CDN: https: // unpkg.com / vue-yandex-maps, yandexMap отображается в окне и автоматически устанавливается. Может быть полезно для Code Pen
Использование
Используйте тег для включения экземпляра карты и используйте атрибуты для определения параметров карты.
имеет класс ymap-container и дочерний элемент, в котором отображается экземпляр карты. Дочерний класс вы можете определить через атрибут карты ymap-class .Если вы не определяете этот класс — дочерний элемент будет иметь атрибут стиля с шириной : 100%; высота: 100%;
Если на вашей карте много маркеров, я настоятельно рекомендую вам использовать атрибут карты useObjectManager . Но в этом случае вы не можете установить обратные вызовы для своих маркеров через атрибут маркера , обратные вызовы .
Вы можете определить метки на своей карте с помощью тега или установить массив объектов с параметрами метки с помощью атрибута , метки (описание интерфейса).Вы также можете использовать оба метода вместе.
Вы должны определить markerId для каждого маркера на вашей карте в любом случае настройки fo (через атрибут карты метки или с помощью компонентов ymap-marker ).
Повторное отображение экземпляра карты при изменении массива с маркерами или свойствами маркера, если маркер является компонентом.
Также сопоставьте свойство часов , координаты и реагируйте без повторной визуализации, когда оно изменилось.
Тип маркера в атрибуте типа маркера может быть:
- Метка
- Полилиния
- Прямоугольник
- Многоугольник
- Круг
<яндекс-карта
: coords = "[54.62896654088406, 39.731893822753904] "
zoom = "10"
: cluster-options = "{
1: {clusterDisableClickZoom: true}
} "
: поведения = "['правитель']"
: controls = "['trafficControl']"
: placemarks = "метки"
map-type = "гибрид"
@ map-was-initialized = "initHandler"
>
"Ваш собственный шаблон"