استفاده از نقشه Mapbox در React Native
Mapbox یکی از پرکاربردترین پلتفرم های مکان محور برای توسعه دهندگان موبایل و وب است.Mapbox مانند Google Maps است اما استفاده از آن آسانتر است.این پلتفرم دارای دیتا سنتر و داده های مکانی مخصوص خود هست که داده های مکانی کاملی به ما می دهد. Mapbox اطلاعات موقعیت مکانی ، جستجوی مکان و حرکت به یک مکان خاص و بسیاری از ویژگی های دیگر را در اختیار ما قرار می دهد. در react native ما می توانیم با نصب NPM Mapbox package در پروژه React Native فعلی خود ، به راحتی از Mapbox استفاده کنیم. بنابراین در این مقاله می خواهیم نحوه کار و استفاده از نقشه Mapbox در React Native برای پروژه های React Native برای هر دو نسخه Android و Ios رو آموزش بدیم.
اگر می خواهید React Native (ری اکت نیتیو) را به صورت کامل و در قالب پروژه های مختلف یاد بگیرید پیشنهاد می کنیم در دوره آموزش جامع و پروژه محور React native شرکت کنید.
1-اولین گام نصب کتابخانه Mapbox در پروژه است.برای اینکار دایرکتوری پروژه رو در Command Prompt برای Windows و Terminal برای Mac باز میکنیم و دستور زیر را اجرا می کنیم
|
1 |
npm install @react-native-mapbox-gl/maps --save |
2- کتابخانه با موفقیت نصب شده است.حالا باید یک سری پیکربندی ها برای Android و Ios انجام دهیم.
نکته : برای استفاده از Mapbox در android نیاز به انجام دادن پیکربندی خاصی نیست.فقط باید کتابخانه را با استفاده از دستور بالا نصب کنید.
3- پیکربندی برای سیستم عامل IOS
برای استفاده از Mapbox در Ios شما نیاز دارید یک سری تنظیمات رو انجام بدید.برای اینکار فایل Your_React_Native_Project -> ios -> Podfile رو در یک Text editor باز کنید.من از Visual Studio Code استفاده می کنم.
خط زیر را مشابه اسکرین شات به Podfile اضافه کنید
|
1 |
pod 'react-native-mapbox-gl', :path => '../node_modules/@react-native-mapbox-gl/maps' |
حالا Terminal رو در دایرکتوری Your_React_Native_Project -> iOS باز کنید و دستور زیر را اجرا کنید
|
1 |
pod install |
پیکربندی های مورد نیاز برای استفاده از Mapbox برای نسخه IOS به طور کامل انجام شده است و حالا باید Mapbox Online access token رو از وب سایت Mapbox بگیریم.
4- به وب سایت Mapbox.com برید و با استفاده از email یک حساب کاربری ایجاد کنید. این فرآیند کاملا رایگان است.
5-پس از موفقیت در روند ثبت نام ، از ما می خواهد که آدرس ایمیل خود را تأیید کنیم و هنگامی که آدرس ایمیل خود را تأیید می کنیم ، باید یک Token ایجاد کنیم و این Token را کپی کنیم تا در پروژه از آن استفاده کنیم.
6- حالا نوبت شروع دست به کیبرد شدن هست.فایل App.js رو باز کنید و کامپوننت های StyleSheet و View رو ایمپورت کنید
|
1 2 3 |
import React, {Component} from 'react'; import {StyleSheet, View} from 'react-native'; |
7-ایمپورت MapboxGL از کتابخانه react-native-mapbox-gl/maps .
|
1 |
import MapboxGL from '@react-native-mapbox-gl/maps'; |
8- استفاده از ()MapboxGL.setAccessToken برای setکردن Token .
|
1 2 3 |
MapboxGL.setAccessToken( 'pk.eyJ1IjoicmVhY3RuYXRpdmVjb2RlIiwiYSI6ImNrYXVqMmdyNjBib2MyeG85eXpmazlkbnQifQ.WXfj-SB3qxEvyZHBYdt3RQ', ) |
9-ایجاد یک کامپوننت به نام App
|
1 2 3 4 5 |
export default class App extends Component { } |
10-ایجاد Constructor برای کلاس App و ایجاد یک state به نام coordinates برای پاس دادن Longitude و Latitude .
|
1 2 3 4 5 6 7 8 9 |
constructor(props) { super(props); this.state = { // Here -122.4324 is Longitude. // Here 37.78825 is Latitude. coordinates: [-122.4324, 37.78825], }; } |
11-اضافه کردن MapboxGL.MapView, MapboxGL.Camera و MapboxGL.PointAnnotation در بلاک render’s return
MapboxGL.MapView : برای نمایش Map استفاده می شود.
MapboxGL.Camera :برای نمایش یک منطقه خاص بر روی صفحه نمایش با قابلیت بزرگنمایی و کوچک نمایی.
MapboxGL.PointAnnotation : برای نمایش marker بر روی نقشه استفاده می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
render() { return ( <View style={styles.MainContainer}> <View style={styles.SubContainer}> <MapboxGL.MapView style={styles.Mapbox}> <MapboxGL.Camera zoomLevel={9} centerCoordinate={this.state.coordinates} /> <MapboxGL.PointAnnotation coordinate={this.state.coordinates} /> </MapboxGL.MapView> </View> </View> ); } |
12-ایجاد استایل
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, }, SubContainer: { height: '100%', width: '100%', backgroundColor: 'white', }, Mapbox: { flex: 1, }, }); |
13-کد کامل برنامه در فایل App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import React, {Component} from 'react'; import {StyleSheet, View} from 'react-native'; import MapboxGL from '@react-native-mapbox-gl/maps'; MapboxGL.setAccessToken( 'pk.eyJ1IjoicmVhY3RuYXRpdmVjb2RlIiwiYSI6ImNrYXVqMmdyNjBib2MyeG85eXpmazlkbnQifQ.WXfj-SB3qxEvyZHBYdt3RQ', ); console.disableYellowBox = true; export default class App extends Component { constructor(props) { super(props); this.state = { // Here -122.4324 is Longitude. // Here 37.78825 is Latitude. coordinates: [-122.4324, 37.78825], }; } render() { return ( <View style={styles.MainContainer}> <View style={styles.SubContainer}> <MapboxGL.MapView style={styles.Mapbox}> <MapboxGL.Camera zoomLevel={9} centerCoordinate={this.state.coordinates} /> <MapboxGL.PointAnnotation coordinate={this.state.coordinates} /> </MapboxGL.MapView> </View> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, }, SubContainer: { height: '100%', width: '100%', backgroundColor: 'white', }, Mapbox: { flex: 1, }, }); |
اسکرین شات در Android:
اسکرین شات در IOS:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
تفاوت توسعه برنامه های android و ios
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
استفاده از Mapbox در react native (ری اکت نیتیو)
نمایش عکس های گوشی در react native (ری اکت نیتیو)
21 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام من ازReverse Geocoder مپباکس
“https://docs.mapbox.com/api/search/geocoding/#reverse-geocoding” استفاده کرده ام اما فقط اسم کشور و اسم شهر را میگیرم، آدرس کامل مثل اسم خیابان و …را با چه متدی بگیرم؟
سلام
میتونید از geocoding استفاده کنید
https://docs.mapbox.com/help/how-mapbox-works/geocoding/
این api ها همون api قبلی هستن دیگه فرقی ندارن که.
من پروژه ای که ازش استفاده کردم فقط نام شهر رو لازم داشتم
میتونید داکیومنت رو مطالعه کنید و راه مناسب رو پیدا کتید
یا اینکه اگر پیدا نکردید یک issue ایجاد کنید تا کسایی که در ساخت کتابخانه مشارکت داشتند جوابتون رو بدن
با سلام مجدد
من Reverse Geocoding()
“https://docs.mapbox.com/api/search/geocoding/#reverse-geocoding” از مپ باکس رو استفاده کردم ولی فقط اسم شهر واسم کشور رو میده ، ادامه آدرس رو نمیده باید از چه متدی استفاده کنم؟؟ ممنونم میشم راهنمایی ام کنید