В Яндекс Картах появилась оптимизация маршрута
Если на маршруте предполагается от четырех до десяти остановок, то Яндекс Карты предложат оптимизировать путь. Работает опция для пешеходного движения, также для общественного и автомобильного транспорта (в последнем случае будут учтены и пробки на дорогах). Как отмечает Яндекс, это будет полезно не только в бытовых или рабочих ситуациях, но и в путешествиях, когда хочется увидеть как можно больше достопримечательностей в новом городе.
Чтобы попробовать опцию, нужно добавить все точки маршрута в произвольном порядке и нажать кнопку «Оптимизировать». Такая возможность есть как в приложении, так и веб-версии Яндекс Карт.
Несколько точек Яндекс карты?
Задача состоит в том что должна быть яндекса карта с не ограниченным количеством точек и при клике должно выходить описание с адресом а так же кастомная метка. Я это все реализовал для одной точки с помощью этой статьи Ссылка 1
Метку кастомизировал, описание вывел по клику. Теперь проблема когда я пытаюсь добавлять множество точек то кастомная метка работает только на ту, что я сделал но описание не выходит у других. Это я пытался интегрировать с помощью этой статьи Ссылка 2
Мой Код для одной метки выглядит сейчас вот так:
ymaps.ready(init); var myMap; function init() < myMap = new ymaps.Map("YMapsID", < center: [43.238253, 76.945465], // Координаты объекта zoom: 13, // Маштаб карты controls: [] // Отключаем элементы управления. >); // Добавим на карту ползунок масштаба и линейку. myMap.controls.add( new ymaps.control.ZoomControl() ); // Отключаем zoom на скролле мыши myMap.behaviors.disable('scrollZoom'); myPlacemark = new ymaps.Placemark([43.238253, 76.945465], < // Координаты метки объекта balloonContent: "АлматыНазвание филиалаБогенбай батыра, 172 2 этаж, офис 72 вход с Желтоксан
+7 777 727 35 63
+7 777 727 35 63
+7 777 727 35 63
" // Надпись метки >, < iconLayout: 'default#image', // Своё изображение иконки метки iconImageHref: "%=static=%img/general/ic-map-marker.svg", // Размер мкетки iconImageSize: [40, 50], // Смещение левого верхнего угла иконки относительно // её "ножки" (точки привязки). iconImageOffset: [-20, -25] >); myMap.geoObjects.add(myPlacemark); //myPlacemark.balloon.open(); >;Как сюда интегрировать код из второй статьи чтобы все метки были кастомизированные + выходило у каждого описание.
Для дальнейшей передачи на бэк энд.
Вот демо с несколькими метками Тык
- Вопрос задан более трёх лет назад
- 1497 просмотров
9 комментариев
Средний 9 комментариев
Как вывести несколько точек на яндекс или гугл картах (имеются координаты)?
Вот я нашла вот такую, мне было супер возможность использовать разные цвета!. Но здесь выводится карта как картинка, не зумить, не передвигать не дает. tech.yandex.ru/maps/doc/staticapi/1.x/dg/concepts/… static-maps.yandex.ru/1.x/…
3 сен 2018 в 10:45
Я не могу понять как использовать ваш варант? Например есть 3 точки (30.17870;59.85630) (30.20716;59.82630) (30.24734;59.84146) — как их вписать в пример?
3 сен 2018 в 10:49
И ещё большая печалька, что я нажимаю на метку в браузере, а она не раскрывается, т. е. я не могу даже посмотреть какая метка какие координаты имеет.
3 сен 2018 в 10:55
Вот так видимо yandex.ru/maps/…
3 сен 2018 в 11:41
Спасибо большое! Получилось! yandex.ru/maps/…
15 сен 2018 в 7:35
Для карт Гугл это может быть применено со следующим кодом:
Mashups with google.maps.Data html, body, #map < height: 100%; margin: 0; padding: 0; overflow: hidden; >.nicebox < position: absolute; text-align: center; font-family: "Roboto", "Arial", sans-serif; font-size: 13px; z-index: 5; box-shadow: 0 4px 6px -4px #333; padding: 5px 10px; background: rgb(255,255,255); background: linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%); border: rgb(229, 229, 229) 1px solid; >#controls < top: 10px; left: 110px; width: 360px; height: 45px; >#data-box < top: 10px; left: 500px; height: 45px; line-height: 45px; display: none; >#census-variable < width: 360px; height: 20px; >#legend < display: flex; display: -webkit-box; padding-top: 7px >.color-key < background: linear-gradient(to right, hsl(5, 69%, 54%) 0%, hsl(29, 71%, 51%) 17%, hsl(54, 74%, 47%) 33%, hsl(78, 76%, 44%) 50%, hsl(102, 78%, 41%) 67%, hsl(127, 81%, 37%) 83%, hsl(151, 83%, 34%) 100%); flex: 1; -webkit-box-flex: 1; margin: 0 5px; text-align: left; font-size: 1.0em; line-height: 1.0em; >#data-value < font-size: 2.0em; font-weight: bold >#data-label < font-size: 2.0em; font-weight: normal; padding-right: 10px; >#data-label:after < content: ':' >#data-caret min ◆ max Как отметить места путешествий на Яндекс Карте?
Яндекс Карты работают с 2004 года и за этот срок превратились в по-настоящему функциональный картографический сервис, который позволяет:
- Отмечать на пользовательских картах места путешествий;
- Прокладывать маршрут между несколькими точками на карте;
- Рассчитывать расстояние в пути;
- Создать список «Мои места»;
- Просматривать наличия пробок на дорогах, а так же рассчитывать путь в зависимости от их интенсивности;
- Сохранить готовую карты на компьютер, распечатать или поделится ссылкой в социальных сетях.
Яндекс Карты предоставляют такие же возможности как и Google Maps, последний имеет немного расширенный функционал, но это такие мелочи, вроде добавления видео к меткам, которые не влияют на главную задачу — отмечать места и маршруты на карте.
Создание пользовательских карт в конструкторе
Всё по аналогии с Google Maps, если вы читали статью «Как отмечать места путешествий Google Maps», то легко разберетесь. На мой взгляд, тут даже как-то проще и интуитивно понятней.
Чтобы попасть в конструктор, кликните по аватрке профиля (верхний правый угол) и в выпадающем меню зайдите «Мои карты».
Откроется окно редактирования (скриншот кликабельный):
Функциональных возможностей меньше чем в гугл мапс. Но, тем не менее, возможно:
- Отметить несколько меток на карте, добавить текстовое описание к каждой, подробнее.
- Проложить между ними линию (к сожалению только прямую), с подсчётом общего расстояния.
- Выделить определённую область многоугольником и отметить области внутри него.
После того, как карта путешествия заполнена, нажимает «Сохранить и продолжить». На следующем шаге Яндекс предлагает либо получить ссылку на созданную карту, либо распечатать. Так же есть возможность добавления на сайте с помощью iframe.
Если сравнивать возможности печати, то Яндекс Карты опережают Google Maps — можно подобрать DPI (разрешение точек на дюйм), размер карты, формат сохраняемого файла.
Импортирование меток в конструктор из файла
Все созданные объекты возможно импортировать и экспортировать во внешний файл. Импорт возможен из Excel файла, а так же KML, GPX или GeoJSON.
GPX — файл в xml формате, который сохраняет данные GPS. Некоторые программы работающие с GPS позволяют сохранять геоданные в таком формате. Возможный импорт в Google Earth
Пример готового для импорта файла в Excel:
Географические координаты как в Excel файле, так и строке поиска указываются в последовательности: широта, а затем долгота через пробел. Количество знаков после точки ограничена семью, это даёт возможность отметить точку на карте с точностью до одного сантиметра.
По умолчанию Яндекс воспринимает введённые координаты как северная широта и восточная долгота. Если координаты попадают под них, то буквенные указатели долготы и широты можно не использовать. Поддерживаются кириллические варианты запросы.
| Северная широта | N (N36.45) | С (С36.45) | Положительное число (36.45) |
| Южная широта | S (S36.45) | Ю (Ю36.45) | Отрицательное число (-36.45) |
| Восточная долгота | E (E42.56) | В (В42.56) | Положительное число (42.56) |
| Западная долгота | W (W42.56) | З (З42.56) | Отрицательное число (-42.56) |
Как отметить несколько мест на Яндекс Карте
Иногда появляется необходимость быстро проложить маршрут, чтобы показать кому-то. Для этого надо кликнуть по кнопке «Маршруты»:
Отмечен маршрут между несколькими точками
Отмечаете необходимые точки или координаты, после чего сервис просчитает оптимальный маршрут движения, с расчётом расстояния и времени в пути, будь-то пешком, на машине или общественном транспорте. Чтобы поделится ссылкой на полученную карту, кликните по кнопке .
Как отметить свое местоположение?
Чтобы увидеть свои координаты и местонахождение на карте, необходимо Яндексу дать возможность отслеживать ваше координаты, для этого:
- Кликните на кнопку ;
- Браузер запросит разрешение на обработку персональных геоданных — разрешите ему.
- На карте появится метка , она и соответствует местоположению того устройства, через которое пользуетесь сервисом. Нажав на неё получите географические координаты (широта и долгота), а так же адрес.
Если пост оказался вам полезен, то оцените его, пожалуйста, ниже! На этом всё, вопросы задавайте в комментариях.