Как сделать анимацию маршрута на карте
Перейти к содержимому

Как сделать анимацию маршрута на карте

  • автор:

Как создать дорожную карту: видеоурок

4.5 Оценок: 4 (Ваша: )

Запустите программу и перейдите в раздел «Эффекты». Дважды кликните по кнопке «Карта путешествия». После этого следуйте подсказкам на экране, чтобы правильно настроить анимацию.

  • Добавьте карту. Например, подходящее изображение можно выбрать в каталоге или загрузить из папки вашего компьютера.
  • Настройте положение карты. Вы можете приближать или отдалять ее, а также свободно перемещать по экрану.
  • Создайте точки маршрута. Просто дважды кликните по местам, в которых были.
  • Скорректируйте анимацию и дизайн. Выберите оформление для точек маршрута и укажите время анимации.
  • Выберите внешний вид пути и транспорта. Выделите подходящий вариант в каталоге и нажмите на кнопку «Готово».

Теперь вы знаете, как создать анимацию дорожной карты. Результат сразу можно увидеть в плеере. При желании перейдите в редактор слайда, чтобы настроить другие параметры анимации карты маршрута.

Поделиться с друзьями:

ВАМ ЭТО ПОНРАВИТСЯ:

Виды анимации в ФотоШОУ PRO

Как сделать эффект приближения слайда — красиво и просто!

Использование 3D камеры в слайд-шоу

Начните создавать свои уникальные слайд-шоу сейчас!

Скачать сейчас Купить со скидкой Отлично работает на Windows 11, 10, 8, 7 и XP

Как создать простую анимированную карту. Mult

Анимированную карту хорошо использовать, когда надо показать длительное путешествие, охватывающее несколько городов (или стран). Такой формат будет хорошо смотреться и на сайте, и в соцсетях.

МОЖНО СДЕЛАТЬ
ИСПОЛЬЗУЕТСЯ В:

Карта, созданная в сервисе mult.dev, представлена в виде глобуса, который постоянно движется, показывая очередные точки путешествия. Выглядит она так.

На бесплатном тарифе вы получите полный функционал редактора карты, но сможете добавить на нее максимум 15 мест и получить видео менее 30 секунд.

Базовый тариф на сервисе начинается с 720 рублей в месяц — при оплате сразу за год. Если оплатить только месяц пользования сервисом, то тариф составит 990 рублей.

Тариф Pro обойдется в 2550 рублей в месяц (при оплате сразу за год). Если оплатить только месяц, то тариф составит 3490 рублей.

Откройте сервис mult.dev. Нажмите «Начать» (кнопка находится в правом верхнем углу).

Авторизуйтесь через электронную почту, аккаунт в Google или GitHab.

Откроется редактор анимированной карты. В левой колонке — редакторская панель. Удалите автоматически поставленные сервисом города, прокрутите вниз, чтобы переключиться на русскоязычную версию сервиса mult.dev.

В строке (+Add place — +Добавить место) впишите отправную точку путешествия. Затем добавьте следующий город. Нажмите на кружок рядом с городом, чтобы выбрать вид транспорт: самолет, машина, автобус, поезд, мотоцикл, теплоход, велосипед или пешком. Аналогичным образом добавьте остальные точки.

Выберите цветовую гамму для карты и формат видео: квадратное, горизонтальное или вертикальное. Установите скорость видео (помните, что на бесплатном тарифе сможете загрузить только 29-секундный ролик.

Нажмите на кнопку «Поделиться анимацией» — вы получите ссылку на анимированную карту. Здесь же будет код для вставки на сайт.

Ссылка и код на анимированную карту появится и когда вы нажмете на кнопку «Создать видео». Дождитесь, когда сервис создаст видео вашей карты. Когда ролик будет готов, скачайте его. Видео анимированной карты будет в формате mp4.

Google Maps API: схема проезда, анимация и стилизация

image

Многие из нас часто вставляют на свои сайты карты. Обычно, это карта на странице контактов с единственным маркером, которым отмечено место офиса. Но иногда у заказчика включается фантазия и начинается «творчество». В свое время я потратил много времени, чтобы разобраться в постоянно меняющемся Google Maps API и хочу поделиться с вами своими наработками для решения обычных проблем с картами, которые выходят за рамки одного маркера.

Все, что описано ниже, можно узнать внимательно читая документацию GMaps API. Предполагается, что читатель уже умеет внедрять карту, подключать API и ставить маркер. Статья не претендует на полноту изложения, но может быть полезна начинающим пользователям Google Maps API.

Маршрут проезда

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

Вариант 1: Едем на автомобиле

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

image

 directionsDisplay = new google.maps.DirectionsRenderer(); var request = < origin: new google.maps.LatLng(60.023539414725356,30.283663272857666), //точка старта destination: new google.maps.LatLng(59.79530896374892,30.410317182540894), //точка финиша travelMode: google.maps.DirectionsTravelMode.DRIVING //режим прокладки маршрута >; directionsService.route(request, function(response, status) < if (status == google.maps.DirectionsStatus.OK) < directionsDisplay.setDirections(response); >>); directionsDisplay.setMap(map); 

Гугл прокладывает маршрут самым удобным, по его мнению, способом. Важный момент: в крупных (да и не очень) городах есть большая разница между направлениями движения. Как по удобству, так и в связи с ограничениями ПДД.
У Гугла доступны четыре режима прокладки маршрута:

• google.maps.TravelMode.DRIVING — Автомобиль
• google.maps.TravelMode.BICYCLING — Велосипед
• google.maps.TravelMode.TRANSIT – Общественный транспорт (работает не везде)
• google.maps.TravelMode.WALKING — Пешеход

Вариант 2: Летим самолетом

У API нет возможности рассчитывать морские и авиамаршруты. Видимо из-за не востребованности. Но иногда все же нужно отобразить какой-либо авиамаршрут на карте. Например, для карты поставок скоропортящегося товара. Исходные данные те же, точка вылета и точка прилета. Для создания этого маршрута нужно просто нарисовать полилинию на карте:

image

route[route.length] = new google.maps.Polyline(< path: [new google.maps.LatLng(16.003575733881323, 101.689453125), new google.maps.LatLng(59.934288, 30.3350336)], //указываем точки старта и финиша geodesic: true, //устанавливаем флаг геодезической кривой. Так и выглядит лучше и точнее передает кратчайший путь между двумя точками map: map //устанавливаем на карту >); 
Анимация перемещения на карте

Если у нас на карте есть линия, например, маршрут авиапоставок, то было бы неплохо прикрутить туда анимацию, которая показывает откуда куда летит этот самый самолет.

image

function animate(route) < //функция анимирует каждый первый символ каждой полилинии var count = 0; icons = null; var lnght=route.length; offsetId = window.setInterval(function() < count = (count + 1) % 200; for(var i= 0; i < lnght; i++)< icons = route[i].get('icons'); icons[0].offset = (count / 2) + '%'; route[i].set('icons', icons); >>, 40); > function initialize() < . //настройка карты route[route.length] = new google.maps.Polyline(< path: [new google.maps.LatLng(16.003575733881323, 101.689453125), new google.maps.LatLng(59.934288, 30.3350336)], geodesic: true, icons: [< icon: , offset: '100%'>], map: map >); animateCircle(route); > 
Как закрасить страну?

Предположим, что вам для каких либо целей нужно закрасить какую-либо страну на карте. Например, чтобы показать страны, в которых вы были. Для этих целей удобно использовать файлы формата KML. Сами файлы с контурами стран можно взять здесь или здесь. Редактировать (цвет и т.д. можно в программе Google Earth).

image

 var KmlLayer = new google.maps.KmlLayer(< url: 'http://yoursite.com/kml/Kazakhstan.kmz', map: map >); 

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

Раскрашиваем карту

Иногда бывает нужно стилизовать карту под внешний вид сайта. Хоть специалисты Гугла и сделали карту, которая устраивает большинство, но есть способ все поменять. Например, для того, чтобы выделенную страну было лучше видно. Для этих целей удобнее всего использовать мастер стилизации карт, который предоставляет Гугл для этих целей. Мастер выдает код в JSON, который можно сразу ставить в скрипт.

image

 var styles = [ < "featureType": "landscape", "stylers": [ < "color": "#ffffff" >] >, < "featureType": "road", "stylers": [ < "lightness": 80 >] >, < "featureType": "administrative.locality", "stylers": [ < "visibility": "off" >] >,< "elementType": "geometry.stroke", "stylers": [ < "color": "#000000" >, < "weight": 0.5 >, < "lightness": 11 >] >, < "featureType": "poi", "stylers": [ < "visibility": "off" >] > ]; map.setOptions(); 
Полезные ссылки

Сервис для создания KML. Также позволяет легко получить массив точек для создания полилинии или просто определить координаты.
Еще один генератор полилиний, с возможностью отмены.

  • советы начинающим
  • google maps api
  • kml

Как сделать сторис «Анимированный маршрут путешествия»

Найти Промокод

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

Приложение с виртуальными картами путешествий: где найти?

Найти приложение, которое создает анимированный маршрут путешествий, не так-то просто. Более того, в настоящее время оно доступно только для IOS. Но если у вас есть гаджеты Apple, то вы без труда сможете воспользоваться этим приложением.

  1. В поиске ищите приложение TravelBoast: Карты Путешествий.
  2. Укажите точки вашего маршрута, постройте его как можно более точно.
  3. Выберите транспорт, с помощью которого вы передвигались: автомобиль, мотоцикл, лодка, самолет, и т.д. В приложении более 50 оригинальных видов транспорта, и их количество увеличивается с каждым обновлением приложения. Средства передвижения можно использовать как реальные, так и вымышленные.
  4. После этого вы можете сохранить свое видео, а затем загрузить его в сторис.

Анимация вашего путешествия на карте мира смотрится действительно намного более эффектно, чем если вы просто опубликуете фото маршрута. Посмотрите, как это выглядит:

Скачать приложение можно по ссылке. Устанавливайте приложение и монтируйте креативные ролики с вашими перемещениями по миру для сторис!

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

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