Как реализована эта интерактивная карта?


alexverem
150

Всем привет.

Есть опыт работы с Yandex Map API. Делал небольшой проект, метки проставлял в js вручную (а точнее скриптом, их много).

Заинтересовала такая карта turistka.ru/altai/map.php

Хочу повторить, но не пойму как она делается? Неужели вручную каждую метку или есть конструктор? В js коде вроде не нашел по метках, значит как-то по другому..

Спасибо


timo-71

alexverem :

Всем привет.

Есть опыт работы с Yandex Map API. Делал небольшой проект, метки проставлял в js вручную (а точнее скриптом, их много).

Заинтересовала такая карта turistka.ru/altai/map.php

Хочу повторить, но не пойму как она делается? Неужели вручную каждую метку или есть конструктор? В js коде вроде не нашел по метках, значит как-то по другому..

Спасибо

https://yandex.ru/dev/maps/jsbox/2.0/placemark

https://yandex.ru/dev/maps/jsbox/2.0/clusterer_create

Для начала.

Потом, F12 и можно найти XHR, которые содержат примерно такое:

"features": [
{"o_type": 7, "id": "o10", "geometry": {"type": "Point", "coordinates": [50.156721, 86.306668]}, "properties": { "hintContent": "Турбаза &#147;Высотник&#148;", "balloonContent": "<div class=desc style="line-height: 1.3;"><a target=_blank href=/altai/info.php?ob=10><img align=left style="padding-right:10px;" src=/im/11/t_bazavisotnik_14.jpg> <b>Турбаза &#147;Высотник&#148;</b></a> &#151; Расположена на берегу Катуни возле поселка Тюнгур. Проживание в 2-х и 4-х местных номерах благоустроенной деревянной гостиницы или турприюте, в своих палатках. Баня, кафе, аил для семинаров, тренингов на 100 человек, пантовые ванны, экскурсии.</div>", "clusterCaption": "Турбаза &#147;Высотник&#148;"}},

.....

А дальше все ясно.

Песочница — Технологии Яндекса

  • yandex.ru
JavaScript API Яндекс.Карт: описание, документация, примеры использования. JS API позволяет встроить на сайт или в приложение через WebView карту с поиском по топонимам и организациям, строить маршруты и смотреть панорамы. JavaScript API можно использовать в проектах для геоаналитики и визуализации данных.


LEOnidUKG

timo-71 #:

А дальше все ясно.

Вы вопроса не поняли. Человек хочет щёлкнуть 1 раз на кнопку «Сделать круто!» и у него по волшебству расставятся точки на карте. Это же программирование, там же все волшебники.


Sitealert

alexverem :
Хочу повторить, но не пойму как она делается

Через Yandex Map API и делается.

Подгрузка объектов через /altai/objson.php

Странный вопрос, если «есть опыт работы с Yandex Map API».


alexverem

LEOnidUKG #:

Вы вопроса не поняли. Человек хочет щёлкнуть 1 раз на кнопку «Сделать круто!» и у него по волшебству расставятся точки на карте. Это же программирование, там же все волшебники.

В гугле вроде через конструктор можно сделать, или я что-то путаю? Вот напр (сделано в интерфейсе):

https://www.google.com/maps/d/embed?mid=1gDqPm51Ip5Nzhnhqr-8jtORL0-ENILPc

Может я не въехал и функционала меньше, но вроде все необходимое есть.

Карта Горного Алтая (Google Мои карты)
Карта Горного Алтая (Google Мои карты)

  • www.google.com
Карта Горного Алтая с основными туристическими местами


LEOnidUKG

Ну и у Яндекса есть конструктор: https://yandex.ru/map-constructor

Вопрос же был, про как расставить точки? Через скрипты или в ручную.


alexverem

LEOnidUKG #:

Ну и у Яндекса есть конструктор: https://yandex.ru/map-constructor

Вопрос же был, про как расставить точки? Через скрипты или в ручную.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *