استفاده از نقشه Mapbox در React Native
Mapbox یکی از پرکاربردترین پلتفرم های مکان محور برای توسعه دهندگان موبایل و وب است.Mapbox مانند Google Maps است اما استفاده از آن آسانتر است.این پلتفرم دارای دیتا سنتر و داده های مکانی مخصوص خود هست که داده های مکانی کاملی به ما می دهد. Mapbox اطلاعات موقعیت مکانی ، جستجوی مکان و حرکت به یک مکان خاص و بسیاری از ویژگی های دیگر را در اختیار ما قرار می دهد. در react native ما می توانیم با نصب NPM Mapbox package در پروژه React Native فعلی خود ، به راحتی از Mapbox استفاده کنیم. بنابراین در این مقاله می خواهیم نحوه کار و استفاده از نقشه Mapbox برای پروژه های 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:
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” از مپ باکس رو استفاده کردم ولی فقط اسم شهر واسم کشور رو میده ، ادامه آدرس رو نمیده باید از چه متدی استفاده کنم؟؟ ممنونم میشم راهنمایی ام کنید
سلام من برای وب سایتم که با ریکت دارم میسازمش از پکیج google-maps-reactاستفاده کردم که الان برای پیدا کردن مکان ها میخوام قابلیت سرچ رو بهش اضافه کنم..منبعی یا مثالی ندارین که بهم معرفی کنیت؟
سلام
از کتابخانه های react-google-autocomplete و react-geocode استفاده کنید
https://imranhsayed.medium.com/google-maps-in-react-autocomplete-location-search-draggable-marker-marker-infobox-565ab8e8cf22
سلام میشه input سرچ رو هم بهش اضافه کنیم؟یعنی کاربر لوکیشن جاری رو بنویسه و Mapbox اونو پیدا کنه،؛برای ریکت نیتیو
سلام .شما باید از Geocoding استفاده کنید
https://docs.mapbox.com/help/tutorials/local-search-geocoding-api/
سلام خسته نباشید
من داخل ویندوز نمیتونم از pod install استفاده کنم و میخوام کلا برای ios برنامه بنویسم ایا امکانش نیست ؟؟
البته میدونم برای خروجی گرفتن مک نیاز هستش ولی تا وقتی که برنامه کامل نشده نمیتونم اینکارو توی ویندوز انجام بدم؟؟
با دستور expo eject هم ios هم android به پروژم اضافه کردم
واقعا نیاز دارم که توی اپلیکیشنم مپ رو بیارم بالا لطفا اگر میشه کمک کنید:)
سلام سلامت باشید
شما باید هکینتاش رو به صورت مجازی روی سیستم نصب کنید تا بتونید با نسخه IOS کار کنید
سلام خسته نباشید توی پروژه ریکت نیتیو من چیزی به اسم فولدر ios وجود نداره
سلام از دستور های زیر استفاده کنید
react-native eject
react-native link
سلام وقت بخیر
من میخواستم یک نقطه را روی نقشه مارک و یا پین کنم
MapboxGL.PointAnnotation
از این تگ استفاده کردم ولی فقط یک نقطه که مارک شده را نشون میده و امکان جابه جا کردن مارک روی نقشه نیست
ممنون میشم راهنمایی کنید
سلام وفت بخیر
به marker
props زیر رو با مقدار true اضافه کنید
draggable
سلام وقتی میزنم نصب میکنم داره پروژه بالا میاد react-native run-android به خطا رو برو میشم ازآخرین نسخه native استفاده میکنم
سلام.
چه مشکلی دارید و با چه خطایی روبرو میشید؟
typeerror: null is not an object (evaluating’MapboxGL.StyleURL’)
خطا اینجوری میده چن روزه درگیرشم حل نمیشه
به احتمال زیاد auto linking درست انجام نشده و کتابخونه رو باید دستی لینک کنید
سلام
من از این مورد استفاده کردم
ولی خطای استایل مپ باکس رو بهم میده
حتی از mapir که از مپ باکس هم استفاده میکنه پکیجشون همین خطا رو میده
StyleURL
سلام.
چه خطایی دارید؟
متن خطا رو بزارید؟