Если вам нужна ваша сеть, приложение для Android или приложение iOS, интегрированное с картой, сервисами Geo-location, расширяемые, пользовательские карты, поиск местоположения существует множество решений. Для со стороны разработчиков есть решения, такие как Google Maps, Mapbox, открытые карты улиц и многое другое. Это часть Alameda dev Исследования
В alameda dev. Наш предпочтительный выбор – mapboxgl. MABOXGL предоставляет SDK для реагирования на родных, но и для веб-приложений, как и Google Maps. Вы можете просмотреть нашу статью о интеграции Google Maps в React Nountain здесь
В этой статье я собираюсь объяснить, как мы интегрируем Mapbox GL в вашем реагированном нативном проекте.
Мы разрабатываем пользовательские приложения Bike Lane для города Барселона, BCNBYBIKE. Клиент нуждался в нативном приложении, которое может показать карту города Барселоны, в этой карте нам нужно отобразить велосипедные дорожки общественного города. И переулники приходят от общественных открытых данных Барселона Городской информации в формате JSON.
Чем проще добавить MapBox SDK в ваш проект, следующий за шагами в Github Repository , но мы нашли руководство установить лучший вариант.
npm install @mapbox/react-native-mapbox-gl --save
Инструкции для iOS.
Добавить нативный Mapbox SDK Framework
В проекте навигатор. Нажмите «Общие вкладки», затем добавьте Node_Modules/@mapbox/react-native-mapbox-gl/ios/mapbox.framework на встроенные двоичные файлы.
Добавить реагировать нативные файлы Mapbox SDK
В навигаторе проекта XCode щелкните правой кнопкой мыши папку библиотек ➜ Добавить файлы в <…>. Добавлять
node_modules/@mapbox/react-native-mapbox-gl/ios/RCTMGL.xcodeproj
Затем в XCode навигация по сборке фаз, нажмите на него, и вы должны увидеть бинарную ссылку с библиотеками, нам нужно добавить librctmgl.a
Добавить пути поиска в заголовке Framework
В настройках сборки вашего приложения целевой поиск Framework_Search_Paths.
Добавьте нерекурсивные пути поиска в рамках
$(PROJECT_DIR)/../node_modules/@mapbox/react-native-mapbox-gl/ios
Добавить сценарий запуска
На вкладке «Фазы сборки» нажмите «Знак плюс», а затем «Новый запуск»
Добавить компонент MapBox для реагирования на новое приложение
Во-первых, вы импортируете компоненты, которые вам понадобится. Это включает в себя компоненты из реагирования, реагируют на родных и карпы. Для отображения карты вам понадобится Токен доступа Mapbox Отказ MapBox использует токены доступа для ассоциирования запросов на ресурсы API с вашей учетной записью. Как только у вас импортировано Mapbox, вы должны установить токен доступа к ящике MapBox, используя mapbox.setaccessToken ().
Добавьте импорт для компонента и настройте токен доступа
import Mapbox from '@mapbox/react-native-mapbox-gl';
Mapbox.setAccessToken('');
Затем добавьте код, чтобы включить компонент в элементе просмотра, помните, что вид контейнера должен иметь стиль Flex: 1 для него, чтобы покрыть полный экран
Инструкции для Android
Нам нужно добавить некоторые репозитории, чтобы получить наши зависимости.
В проекте: build.gradle
В приложении: build.gradle. Добавить проект под зависимостями
В Settings.gradle включают в себя проект, поэтому Грейл знает, где найти проект
include ':mapbox-react-native-mapbox-gl'
project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl')
В MainaPlaplication.java добавить импорт com.mapbox.rctmgl.rctmglpackage; В качестве оператора импорта и нового RCTMGLPackage () в GetPackages ()
Возможные ошибки
Если вы получите ошибку:)
compile (project(':mapbox-react-native-mapbox-gl')) {
compile ('com.squareup.okhttp3:okhttp:3.6.0') {
force = true
}
}
Приложение Android будет выглядеть так
Показывая велосипедные полосы на карте
Импортируйте данные вашей линии в переменную
import biciLanes from 'carril_bici.js'
Добавить компоненты Shapsource и Linelayer Mapbox
Полный код похож на это:
Вид на карту после этого, как это:
Нужна помощь в проекте? Я открыт для внештатных рабочих мест. http://alamedadev.com.