Как открыть карту (навигатор) в приложении Capacitorjs
Опубликовано 06 июля 2024 AntonSeagull — 1 min
Я, как разработчик, часто сталкивался с задачей интеграции карт и навигаторов в мобильные приложения. Поэтому я написал удобную библиотеку для решения этой задачи. В этой статье я расскажу, как вы можете добавить возможность открытия карт и навигаторов в ваше приложение с помощью плагина capacitor-map-link https://www.npmjs.com/package/capacitor-map-link.
Шаг 1: Установка необходимых пакетов
npm install capacitor-map-link @capacitor/action-sheet capacitor-linking
npx cap sync
Для работы библиотеки нужны 2 зависимости это @capacitor/action-sheet, для отображения Action Sheet и capacitor-linking для определения, какие приложения доступны на телефоне.
Шаг 2: Использование функции showLocation
Функция showLocation отображает Action Sheet с выбором приложений для открытия карты.
Пример использования:
import { CapMapLink } from 'capacitor-map-link';
CapMapLink.showLocation({
latitude: 38.8976763,
longitude: -77.0387185,
sourceLatitude: -8.0870631, // опционально укажите начальное местоположение для маршрута
sourceLongitude: -34.8941619, // обязательно, если указаны sourceLatitude
title: 'The White House', // опционально
googleForceLatLon: false, // опционально заставляет GoogleMaps использовать координаты вместо названия
googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // опционально укажите google-place-id
alwaysIncludeGoogle: true, // опционально, всегда добавляет Google Maps на iOS и открывает в Safari (по умолчанию: false)
dialogTitle: 'Выберите приложение', // опционально (по умолчанию: 'Open in Maps')
dialogMessage: 'Какое приложение вы хотите использовать?', // опционально (по умолчанию: 'What app would you like to use?')
cancelText: 'Отмена', // опционально (по умолчанию: 'Cancel')
appsWhiteList: ['google-maps'], // опционально, укажите, какие приложения отображать (по умолчанию: все поддерживаемые приложения, установленные на устройстве)
naverCallerName: 'com.example.myapp', // для Naver Map укажите имя вашего приложения (bundle ID для iOS и applicationId для Android)
appTitles: { 'google-maps': 'Мои карты Google' }, // опционально, можно переопределить стандартные названия приложений
app: 'uber', // опционально укажите конкретное приложение для использования
directionsMode: 'walk', // опционально, допустимые значения: 'car', 'walk', 'public-transport' или 'bike'
});
Все параметры который отмечены как "опционально" не обязательны.
После вызова функции showLocation, будет выполнена проверка доступны приложений, если приложений больше чем 1, то будет показан Action Sheet для выбора, если было найдено только 1 приложение, то оно откроется автоматически без выбора.
Шаг 3: Добавление схем URL в Info.plist
Чтобы ваше приложение корректно обрабатывало URL схемы на iOS, добавьте необходимые схемы в файл Info.plist.
Пример Info.plist https://github.com/AntonSeagull/capacitor-map-link?tab=readme-ov-file#example-infoplist
Шаг 4: Добавление схем URL в AndroidManifest.xml
Чтобы ваше приложение корректно обрабатывало URL схемы на Android, добавьте необходимые схемы в файл AndroidManifest.xml
Пример AndroidManifest.xml https://github.com/AntonSeagull/capacitor-map-link?tab=readme-ov-file#example-androidmanifestxml
Если вам нужна помощь с интеграцией или у вас есть вопросы, не стесняйтесь обращаться ко мне в Telegram.