Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Реализация пошаговой навигации с помощью Google Maps в Ionic

  1. Прежде чем мы начнем
  2. 1. Добавить панель направлений в шаблон
  3. 2. Внедрить Службу Направлений
  4. Резюме

Один из самых распространенных вопросов, которые я получаю о Ionic, - как создать маршрут между двумя точками с помощью Google Maps. У меня довольно много уроков по делать разные вещи с Google Maps в Ionic Так что я подумал, что пришло время заняться и этой проблемой.

Мы собираемся создать простое приложение, которое будет отображать карту Google и использовать DirectionsService и DirectionsRenderer, которые предоставляет Javascript SDK Google Maps, для отображения маршрута между двумя точками на карте, а также для направления поворотов.

Вот как будет выглядеть приложение, когда мы закончим:

Один из самых распространенных вопросов, которые я получаю о Ionic, - как создать маршрут между двумя точками с помощью Google Maps

Направления поворотов Карты Google будут добавлены на панель вверху, и пользователь сможет прокручивать эти направления.

Прежде чем мы начнем

Последнее обновление для Ionic 3.0.1

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

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

ВАЖНО: я не буду рассказывать о том, как настроить базовую карту с помощью Google Maps, в этом руководстве. Вы можете следовать этому базовое руководство по настройке Google Maps в Ionic если у вас еще не настроены Карты Google.

1. Добавить панель направлений в шаблон

Вам нужно будет открыть шаблон, содержащий вашу карту Google, и добавить дополнительный раздел, который будет содержать «панель направлений». Это область, которая будет удерживать поворот за поворотом:

<ion-content> <ion-card> <ion-card-content> <div #directionsPanel> </ div> </ ion-card-content> </ ion-card> <div #map id = "map"> </ div> </ ion-content>

Я только что использовал <ion-card> в этом случае, но вы можете использовать все, что вам нравится, и стилизовать его так, как вы хотите - вот стили, которые я использовал:

.ios, .md {home-page {.scroll {height: 100%} #map {width: 100%; высота: 100%; } ion-card {max-height: 200px; переполнение: прокрутка; положение: абсолютное; z-индекс: 1; }}}

SDK Google Maps Javascript просто внедрит содержимое для поворота, поворачивая навигацию в любой контейнер, к которому вы хотите присоединить его.

2. Внедрить Службу Направлений

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

Вот как это должно выглядеть:

импортировать {Component, ViewChild, ElementRef} из '@ angular / core'; import {NavController} из 'ионно-угловой'; @ Component ({селектор: 'домашняя страница', templateUrl: 'home.html'}) класс экспорта HomePage {@ ViewChild ('map') mapElement: ElementRef; @ ViewChild ('directionsPanel') directionsPanel: ElementRef; карта: любая; конструктор (общедоступный navCtrl: NavController) {} ionViewDidLoad () {this. loadMap (); этот . startNavigating (); } loadMap () {let latLng = new google .maps .LatLng (- 34,9290, 138,6010); let mapOptions = {center: latLng, zoom: 15, mapTypeId: google .maps .MapTypeId. ДОРОЖНАЯ КАРТА} это. map = new google .maps .Map (this. mapElement .nativeElement, mapOptions); } startNavigating () {let directionsService = new google .maps .DirectionsService; let directionsDisplay = новый Google .maps .DirectionsRenderer; направления отображения setMap (это. карта); направления отображения setPanel (this. directionsPanel .nativeElement); Направления обслуживания. route ({origin: 'adelaide', пункт назначения: 'adelaide oval', travelMode: google .maps .TravelMode ['DRIVING']}, (res, status) => {if (status == google .maps .DirectionsStatus. OK ) {directionsDisplay. setDirections (res);} else {console. warn (status);}}); }}

У меня базовая реализация Google Maps настроена как обычно, но я добавил новую функцию startNavigating, которая вызывается из функции ionViewDidLoad. Мы создаем экземпляры как DirectionsService, так и DirectionsRenderer, а затем мы предоставляем ссылку на нашу карту на функцию setMap и ссылку на элемент панели направлений, который мы установили в шаблоне, на функцию setPanel. Мы получаем ссылку на этот элемент, используя @ViewChild в верхней части файла.

Мы настраиваем DirectionsService, вызывая метод route и предоставляя ему объект, который детализирует источник и пункт назначения, а также способ перемещения. Есть много других доступных конфигураций, которые вы можете использовать в этом объекте, поэтому обязательно взгляните на документация ,

В этом случае мы просто предоставляем текстовый адрес, но вы также можете указать широту и долготу напрямую, если хотите:

происхождение: {лат .: 37.77, lng: - 122.447}, назначение: {широта: 37.768, lng: - 122.511},

Вторая часть конфигурации маршрута - это функция обратного вызова, которая запускается после отправки запроса в Google Maps. Мы получаем ответ обратно, и если этот ответ успешен, мы вызываем функцию setDirections, которая завершит процесс.

Если вы запустите приложение сейчас, вы должны увидеть что-то вроде этого:

Если вы запустите приложение сейчас, вы должны увидеть что-то вроде этого:

Резюме

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