آموزش React Native - استفاده از نقشه گوگل

Google maps یک سرویس نمایش نقشه است که توسط گوگل توسعه داده شده است.گوگل در 8February 2005 این سرویس رو به صورت رایگان در اختیار مردم قرار داد.البته منظور از رایگان برای استفاده عموم است. شما به عنوان توسعه دهنده اپلیکیشن میتونید 100 درخواست به صورت رایگان به این سرویس داشته باشید و برای درخواست های بیشتر باید هزینه پرداخت کنید.البته جدیدا حتما باید credit card تهیه کنید تا بتونید از همین 100 درخواست رایگان استفاده کنید و در صورت استفاده بیشتر مبلغ از اعتبارتون کم بشه.در react native ما میتونیم به راحتی از سرویس Google maps با استفاده از کتابخانه react-native-maps استفاده کنیم.

react-native-maps یک کتابخانه محبوب بین توسعه دهندگان است که به صورت هفتگی 60 هزار نفر اون رو دانلوذ می کنند.پس حالا می دونیم که چقدر از سرویس نقشه گوگل توسعه دهندگان react native استفاده می کنند. در این آمورش متنی قصد داریم یاد بگیریم که چجوری Google Maps API key رو بگیریم و طول وعرض جغرافیایی یک مکان رو بر روی نقشه نمایش بدیم.

1. دایرکتوری پروژه خودتون رو در command prompt یا Terminal باز کنید و دستور زیر رو برای نصب کتابخانه react-native-maps در پروژتون اجرا کنید.اگر از سیستم عامل ویندوز استفاده می کنید Command prompt رو به صورت Administrator اجرا کنید.

npm install react-native-maps --save

1	npm install react-native-maps --save

اسکرین شات:

2.بعد از اجرای دستور بالا دستور react–native link رو برای لینک شدن کتابخانه native به پروژه اجرا کنید.این دستور باعث می شود تا تمام dependencies از طریق ویرایش فایل ها به صورت خودکار اضافه شود.

3.اگر شما در نصب و لینک کتابخانه مشکل دارید میتونید از داکیومنت رسمی react native maps تمام مراحل نصب را بخوانید.نباید در مورد این موضوع نگران باشید.اگر دستور link به صورت خودکار کار نکرد می توانید عملیات لینک را به صورت دستی انجام دهید.برای پیاده سازی GoogleMaps در IOS ما نیاز داریم فایل AppDelegate.m را بر طبق مستندات ویرایش کنیم.

4. ایجاد Google Authentication API Key از پنل توسعه دهندگان گوگل :

1.اگر ما قصد داریم از Google Maps در اپلیکیشن استفاده کنیم باید API key رو از پنل توسعه دهندگان گوگل بگیریم.بنابراین Google Developer Console رو در مرورگرمان باز می کنیم و با حساب gmail خودمان وارد می شویم.حالا نیاز داریم که یک پروژه جدید برای استفاده از Google Maps ایجاد کنیم.نام پروژه می تواند هر چیزی باشد فقط توجه داشته باشید که این نام باید منحصر به فرد باشد.

2.از نوار بالا موجود در پنل پروژه جدید ایجاد شده را انتخاب کنید:

3.حالا API key را از منو Create Credentials انتخاب کنید

4.شما در یک dialog box کلید ایجاد شده را می بیند.API key را در یک جا کپی کنید چون در آینده از اون استفاده خواهیم کرد.

5.ما نیاز داریم که Maps SDK را برای Android فعال کنیم.برای فعال سازی Hamburger Icon موجود در سمت چپ را فشار دهید و در نوار کشویی Google Maps -> Overview را انتخاب کنید.

6.Maps SDK for Android را انتخاب کنید

آموزش جامع و پروژه محور react native

7.Maps SDK را از طریق کلیک کردن بر روی دکمه ENABLE فعال کنید.

8.بعد از فعال سازی Maps SDK برای اندروید پروژه React Native شما برای استفاده از Google maps آماده است.حالا نوبت کد زدن است.

5. فایل AndroidManifest.xml را در مسیر Your_React_Native_Project -> android -> app -> src -> main باز کنید و meta-data زیر را که شامل کلید می شود را به این فایل اضافه کنید.

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="Put your API key Here"/>

<meta-data

android:name="com.google.android.geo.API_KEY"

android:value="Put your API key Here"/>

سورس کد فایل AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.project2">
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
   
   <meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="AIzaSyDjEdQzNTW6N6NbwxAIOgzp0eXDbSO9ssc"/>
  
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
 
</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.project2">

<uses-permission android:name="android.permission.INTERNET" />

<application

android:name=".MainApplication"

android:label="@string/app_name"

android:icon="@mipmap/ic_launcher"

android:roundIcon="@mipmap/ic_launcher_round"

android:allowBackup="false"

android:theme="@style/AppTheme">

<meta-data

android:name="com.google.android.geo.API_KEY"

android:value="AIzaSyDjEdQzNTW6N6NbwxAIOgzp0eXDbSO9ssc"/>

<activity

android:name=".MainActivity"

android:label="@string/app_name"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

android:windowSoftInputMode="adjustResize">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

6. فایل App.js را باز کنید و کامپوننت های StyleSheet & View را ایمپورت کنید.

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

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

7.کامپوننت های MapView و Marker را از کتابخانه react-native-maps ایمپورت کنید.

MapView : برای نمایش نقشه در اپلیکیشن استفاده می شود.

Marker : برای نمایش یک مارکر بر روی محل مورد نظر با عنوان اون نقطه استفاده می شود.

import MapView from 'react-native-maps';
import { Marker } from 'react-native-maps';

1 2	import MapView from 'react-native-maps'; import { Marker } from 'react-native-maps';

8.اضافه کردن کامپوننت MapView به بلاک render’s return در View اصلی.درون کامپوننت MapView ما از کامپوننت Marker برای نمایش محل مورد نظر استفاده می کنیم.

 render() {
    return (
      <View style={styles.MainContainer}>
 
        <MapView
          style={styles.mapStyle}
          showsUserLocation={false}
          zoomEnabled={true}
          zoomControlEnabled={true}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
 
          <Marker
            coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
            title={"Marker Title"}
            description={"Marker Description Text"}
          />
 
        </MapView>
 
      </View>
    );
  }

render() {

return (

<MapView

style={styles.mapStyle}

showsUserLocation={false}

zoomEnabled={true}

zoomControlEnabled={true}

initialRegion={{

latitude: 37.78825,

longitude: -122.4324,

latitudeDelta: 0.0922,

longitudeDelta: 0.0421,

}}>

<Marker

coordinate={{ latitude: 37.78825, longitude: -122.4324 }}

title={"Marker Title"}

description={"Marker Description Text"}

</MapView>

</View>

);

}

9. ایجاد استایل سفارشی.

const styles = StyleSheet.create({
  MainContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  mapStyle: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

const styles = StyleSheet.create({

MainContainer: {

position: 'absolute',

top: 0,

left: 0,

right: 0,

bottom: 0,

alignItems: 'center',

justifyContent: 'flex-end',

mapStyle: {

position: 'absolute',

top: 0,

left: 0,

right: 0,

bottom: 0,

});

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

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import MapView from 'react-native-maps';
import { Marker } from 'react-native-maps';
 
export default class App extends Component {
  render() {
    return (
      <View style={styles.MainContainer}>
 
        <MapView
          style={styles.mapStyle}
          showsUserLocation={false}
          zoomEnabled={true}
          zoomControlEnabled={true}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
 
          <Marker
            coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
            title={"Marker Title"}
            description={"Marker Description Text"}
          />
 
        </MapView>
 
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  MainContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  mapStyle: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

import React, { Component } from 'react';

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

import MapView from 'react-native-maps';

import { Marker } from 'react-native-maps';

export default class App extends Component {

render() {

return (

<MapView

style={styles.mapStyle}

showsUserLocation={false}

zoomEnabled={true}

zoomControlEnabled={true}

initialRegion={{

latitude: 37.78825,

longitude: -122.4324,

latitudeDelta: 0.0922,

longitudeDelta: 0.0421,

}}>

<Marker

coordinate={{ latitude: 37.78825, longitude: -122.4324 }}

title={"Marker Title"}

description={"Marker Description Text"}

</MapView>

</View>

);

}

const styles = StyleSheet.create({

MainContainer: {

position: 'absolute',

top: 0,

left: 0,

right: 0,

bottom: 0,

alignItems: 'center',

justifyContent: 'flex-end',

mapStyle: {

position: 'absolute',

top: 0,

left: 0,

right: 0,

bottom: 0,

});

اسکرین شات:

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

24 دیدگاه

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

register.hk65 گفت:

فوریه 15, 2021 در 2:19 ب.ظ

با درود و وقت بخیر.
چطور باید مقادیر latitudeDelta و longitudeDelta رو با توجه به مختصات مورد نظر خودمون تنظیم کنیم؟
با سپاس از آموزش های خوب شما

پاسخ
- مهدی گفت:
  
  فوریه 15, 2021 در 3:38 ب.ظ
  
  درود
  .باید موقعیت کاربر رو در react native بگیرید
  که میتونید از مقاله گرفتن موقعیت مکانی کاربر در react native استفاده کنید
  مقدار props initialRegion رو برابر یک state بزارید و بعد از گرفتن مقادیر lat و lang کاربر state مورد نظر رو بروز کنید
  
  پاسخ
  - register.hk65 گفت:
    
    فوریه 16, 2021 در 4:38 ب.ظ
    
    سپاس از شما. برای گرفتن موقعیت مکانی روی گوشی با اندروید 9 به مشکل خوردم. پیام مجوز دسترسی به location میاد و تایید می کنم. اما مقدار اولیه ی latitude و longitude رو صفر نمایش میده. با جابجایی هم هیچ تغییری ایجاد نمی شه(location گوشی هم روشنه). البته یک هشداری در اجرای برنامه میاد. تصویر زیر: https://uupload.ir/files/phje_whatsapp_image_2021-02-16_at_16.13.59(1).jpeg https://uupload.ir/files/t8uz_whatsapp_image_2021-02-16_at_16.13.59.jpeg
    
    ممنون میشم بررسی بفرمایید.
  - مهدی گفت:
    
    فوریه 17, 2021 در 7:45 ق.ظ
    
    سلام
    چک کنید ببینید اصلا position.coords.latitude, و position.coords.longitude, اصلا مقدار دارن در تابع getLongLat ؟؟

آموزش React Native – استفاده از نقشه گوگل

4. ایجاد Google Authentication API Key از پنل توسعه دهندگان گوگل :

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

24 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

4. ایجاد Google Authentication API Key از پنل توسعه دهندگان گوگل :

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

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

24 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ