استفاده از نقشه Mapbox در React Native

Mapbox یکی از پرکاربردترین پلتفرم های مکان محور برای توسعه دهندگان موبایل و وب است.Mapbox مانند Google Maps است اما استفاده از آن آسانتر است.این پلتفرم دارای دیتا سنتر و داده های مکانی مخصوص خود هست که داده های مکانی کاملی به ما می دهد. Mapbox اطلاعات موقعیت مکانی ، جستجوی مکان و حرکت به یک مکان خاص و بسیاری از ویژگی های دیگر را در اختیار ما قرار می دهد. در react native ما می توانیم با نصب NPM Mapbox package در پروژه React Native فعلی خود ، به راحتی از Mapbox استفاده کنیم. بنابراین در این مقاله می خواهیم نحوه کار و استفاده از نقشه Mapbox برای پروژه های React Native برای هر دو نسخه Android و Ios رو آموزش بدیم.

1-اولین گام نصب کتابخانه Mapbox در پروژه است.برای اینکار دایرکتوری پروژه رو در Command Prompt برای Windows و Terminal برای Mac باز میکنیم و دستور زیر را اجرا می کنیم

npm install @react-native-mapbox-gl/maps --save

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 اضافه کنید

pod 'react-native-mapbox-gl', :path => '../node_modules/@react-native-mapbox-gl/maps'

1	pod 'react-native-mapbox-gl', :path => '../node_modules/@react-native-mapbox-gl/maps'

حالا Terminal رو در دایرکتوری Your_React_Native_Project -> iOS باز کنید و دستور زیر را اجرا کنید

pod install

1	pod install

پیکربندی های مورد نیاز برای استفاده از Mapbox برای نسخه IOS به طور کامل انجام شده است و حالا باید Mapbox Online access token رو از وب سایت Mapbox بگیریم.

4- به وب سایت Mapbox.com برید و با استفاده از email یک حساب کاربری ایجاد کنید. این فرآیند کاملا رایگان است.

5-پس از موفقیت در روند ثبت نام ، از ما می خواهد که آدرس ایمیل خود را تأیید کنیم و هنگامی که آدرس ایمیل خود را تأیید می کنیم ، باید یک Token ایجاد کنیم و این Token را کپی کنیم تا در پروژه از آن استفاده کنیم.

6- حالا نوبت شروع دست به کیبرد شدن هست.فایل App.js رو باز کنید و کامپوننت های StyleSheet و View رو ایمپورت کنید

import React, {Component} from 'react';
 
import {StyleSheet, View} from 'react-native';

import React, {Component} from 'react';

import {StyleSheet, View} from 'react-native';

7-ایمپورت MapboxGL از کتابخانه react-native-mapbox-gl/maps .

import MapboxGL from '@react-native-mapbox-gl/maps';

1	import MapboxGL from '@react-native-mapbox-gl/maps';

8- استفاده از ()MapboxGL.setAccessToken برای setکردن Token .

MapboxGL.setAccessToken(
  'pk.eyJ1IjoicmVhY3RuYXRpdmVjb2RlIiwiYSI6ImNrYXVqMmdyNjBib2MyeG85eXpmazlkbnQifQ.WXfj-SB3qxEvyZHBYdt3RQ',
)

MapboxGL.setAccessToken(

'pk.eyJ1IjoicmVhY3RuYXRpdmVjb2RlIiwiYSI6ImNrYXVqMmdyNjBib2MyeG85eXpmazlkbnQifQ.WXfj-SB3qxEvyZHBYdt3RQ',

)

9-ایجاد یک کامپوننت به نام App

export default class App extends Component {
 
 
 
}

export default class App extends Component {

}

10-ایجاد Constructor برای کلاس App و ایجاد یک state به نام coordinates برای پاس دادن Longitude و Latitude .

 constructor(props) {
    super(props);
    this.state = {

      // Here -122.4324 is Longitude.
      // Here 37.78825 is Latitude.
      coordinates: [-122.4324, 37.78825],
    };
  }

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 بر روی نقشه استفاده می شود.

  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>
    
    );
  }

render() {

return (

<MapboxGL.MapView style={styles.Mapbox}>

<MapboxGL.Camera

zoomLevel={9}

centerCoordinate={this.state.coordinates}

<MapboxGL.PointAnnotation coordinate={this.state.coordinates} />

</MapboxGL.MapView>

</View>

);

}

12-ایجاد استایل

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
  },
  SubContainer: {
    height: '100%',
    width: '100%',
    backgroundColor: 'white',
  },
  Mapbox: {
    flex: 1,
  },
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

SubContainer: {

height: '100%',

width: '100%',

backgroundColor: 'white',

Mapbox: {

flex: 1,

});

13-کد کامل برنامه در فایل App.js

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,
  },
});

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 (

<MapboxGL.MapView style={styles.Mapbox}>

<MapboxGL.Camera

zoomLevel={9}

centerCoordinate={this.state.coordinates}

<MapboxGL.PointAnnotation coordinate={this.state.coordinates} />

</MapboxGL.MapView>

</View>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

SubContainer: {

height: '100%',

width: '100%',

backgroundColor: 'white',

Mapbox: {

flex: 1,

});

اسکرین شات در Android:

اسکرین شات در IOS:

مطالب زیر را حتما مطالعه کنید

12 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

ali sivandiy گفت:
سپتامبر 13, 2020 در 12:58 ب.ظ
سلام خسته نباشید
من داخل ویندوز نمیتونم از pod install استفاده کنم و میخوام کلا برای ios برنامه بنویسم ایا امکانش نیست ؟؟
البته میدونم برای خروجی گرفتن مک نیاز هستش ولی تا وقتی که برنامه کامل نشده نمیتونم اینکارو توی ویندوز انجام بدم؟؟
با دستور expo eject هم ios هم android به پروژم اضافه کردم
واقعا نیاز دارم که توی اپلیکیشنم مپ رو بیارم بالا لطفا اگر میشه کمک کنید:)
پاسخ
- مهدی گفت:
  سپتامبر 14, 2020 در 8:45 ق.ظ
  سلام سلامت باشید
  شما باید هکینتاش رو به صورت مجازی روی سیستم نصب کنید تا بتونید با نسخه IOS کار کنید
  پاسخ
حامد گفت:
سپتامبر 9, 2020 در 11:43 ق.ظ
سلام خسته نباشید توی پروژه ریکت نیتیو من چیزی به اسم فولدر ios وجود نداره
پاسخ
- مهدی گفت:
  سپتامبر 9, 2020 در 1:01 ب.ظ
  سلام از دستور های زیر استفاده کنید
  react-native eject
  react-native link
  پاسخ
webmaster536 گفت:
جولای 14, 2020 در 2:02 ق.ظ
سلام وقت بخیر
من میخواستم یک نقطه را روی نقشه مارک و یا پین کنم
MapboxGL.PointAnnotation
از این تگ استفاده کردم ولی فقط یک نقطه که مارک شده را نشون میده و امکان جابه جا کردن مارک روی نقشه نیست
ممنون میشم راهنمایی کنید
پاسخ
- مهدی گفت:
  جولای 14, 2020 در 10:38 ق.ظ
  سلام وفت بخیر
  به marker
  props زیر رو با مقدار true اضافه کنید
  draggable
  پاسخ
امیر گفت:
ژوئن 28, 2020 در 11:01 ق.ظ
سلام وقتی میزنم نصب میکنم داره پروژه بالا میاد react-native run-android به خطا رو برو میشم ازآخرین نسخه native استفاده میکنم
پاسخ
- مهدی گفت:
  ژوئن 28, 2020 در 11:28 ق.ظ
  سلام.
  چه مشکلی دارید و با چه خطایی روبرو میشید؟
  پاسخ
زارعی گفت:
ژوئن 7, 2020 در 11:55 ب.ظ
typeerror: null is not an object (evaluating’MapboxGL.StyleURL’)
خطا اینجوری میده چن روزه درگیرشم حل نمیشه
پاسخ
- مهدی گفت:
  ژوئن 8, 2020 در 8:24 ق.ظ
  به احتمال زیاد auto linking درست انجام نشده و کتابخونه رو باید دستی لینک کنید
  پاسخ
زارعی گفت:
ژوئن 7, 2020 در 11:34 ق.ظ
سلام
من از این مورد استفاده کردم
ولی خطای استایل مپ باکس رو بهم میده
حتی از mapir که از مپ باکس هم استفاده میکنه پکیجشون همین خطا رو میده
StyleURL
پاسخ
- مهدی گفت:
  ژوئن 7, 2020 در 12:44 ب.ظ
  سلام.
  چه خطایی دارید؟
  متن خطا رو بزارید؟
  پاسخ