یکپارچه سازی نقشه ها و ویژگی های جغرافیایی در React Native Apps

برنامه های تلفن همراه آگاه تبدیل شده اند و ارائه کاربران شخصی سازی شده، تجربیات متنی. React Native، با قابلیت های متقابل پلتفرم آن، پایه محکمی برای ساخت چنین برنامه هایی فراهم می کند. یکپارچه سازی نقشه ها و geolocation نه تنها باعث افزایش تعامل کاربر می شود، بلکه ویژگی هایی مانند ناوبری، اعلان های مبتنی بر مکان و جستجو های نزدیک را باز می کند.

مفاهیم اصلی: Maps و Geolocation در React Native

نقشه ها در برنامه های تلفن همراه به عنوان نمایندگی بصری تعاملی از داده های جغرافیایی خدمت می کنند.در React Native نقشه ها معمولا به عنوان اجزای بومی پشتیبانی شده توسط SDK های نقشه خاص پلت فرم (Google Maps در Android، Apple Maps در iOS یا Google Maps از طریق ارائه دهندگان سفارشی) Geolocation به توانایی به دست آوردن مختصات دنیای واقعی دستگاه (لاشته، ارتفاع، طولانی) با استفاده از GPS، Wi-Fi یا شبکه های سلولی.

با هم، این ویژگی ها قدرت یک آرایه گسترده از موارد استفاده: نمایش های اشتراک گذاری سواری، پیدا کنندگان رستوران، ردیاب های تناسب اندام و ردیابی تحویل. React Native این قابلیت ها را از طریق کتابخانه های نگهداری شده توسط جامعه که SDK های بومی را به اجزای جاوا اسکریپت متصل می کنند، افشا می کند.

کتابخانه های محبوب برای نقشه ها و مکان های جغرافیایی

واکنش- نقشه ها

استاندارد de facto برای جاسازی نقشه در React Native. از هر دو Google Maps و Apple Maps از طریق یک API یکپارچه پشتیبانی می کند.ویژگی های آن شامل نشانگرهای قابل تنظیم، تماس ها، پلیگون ها، پلی استر، نقشه های حرارتی و دستکاری حرکتی داخلی است. کتابخانه به طور فعال حفظ و به طور گسترده ای مورد استفاده قرار می گیرد.

خدمات درمانی-native-geolocation

در حالی که React Native (FLT:0) API هنوز در دسترس است، آن را از دست داده و فاقد کنترل دقیق و دقیق است. react-nact-nive-geolocation-service یک جایگزین مدرن، وعده داده شده با دقت قابل تنظیم، زمان خروج و اجازه کار می کند تا آن را به طور مداوم با ادغام مناسب و مناسب در iOS کار کند.

نمایشگاه

برای پروژه های مدیریت شده Expo، expo-location یک API ساده ارائه می دهد که مجوزهای، ردیابی مکان و ژئوکد کردن از جعبه را کنترل می کند، فرایند توسعه را ساده می کند اما دسترسی به سفارشی سازی بومی را محدود می کند -ایده آل برای نمونه های اولیه یا برنامه هایی که نیازی به ادغام پلت فرم عمیق ندارند.

سایر کتابخانه های قابل توجه

  • مکان های کاربردی-Google-google: ارائه خودکار کامل و محل جزئیات از Google Places API.
  • - طرح بندی-گلوله: ارائه سبک های نقشه سفارشی و کاشی های آفلاین (بدون فعال نگه داشته شده).
  • [[۱]:۰ [۱] [۱] [۱۰] [۱] [۱]] [۱] [۱]: [۱] خوشه های کارآمد را برای واکنش به نقشه های مولد اضافه کنید.

در مقایسه با جزئیات، به اسناد رسمی [FLT-1] و خدمات رسانی اشاره کنید.

پیاده سازی نقشه در برنامه شما

نصب و راه اندازی

با نصب کتابخانه و پیکربندی وابستگی های خاص پلت فرم شروع کنید.

npm install react-native-maps
cd ios && pod install

اگر از Google Maps در اندروید استفاده می کنید، کلید API خود را به اضافه کنید:

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="YOUR_GOOGLE_MAPS_API_KEY" />

برای iOS با Google Maps، همان کلید را به یا اضافه کنید، جایگزین آن، Apple Maps بدون هیچ کلید API از جعبه کار می کند.

نقشه اصلی

این ماده در قرآن کریم آمده است: «وَهَهَهَهَهَهُمَهُمَهُمَهُمَهُمَهُوا مَنَهُوا مَنَهُمَهُوا بَهَهَهَهَهَهَهَهُمَهُمَهُمَهُمَهُمَهُمَهُمَهُهُوا مَهُوا مَهُوا مَهُوا مَهُمَهُمَهُمَهُمَهُمَهُمَهُوا مَهُوا مَهُمَهُمَهُمَهُوا مَهُمَهَهُوا مَهُمَهُمَهُمَهُوا مَهُمَهُمَهُمَهُوَهُمَهُمَهُمَهُمَهُمَهُمَهُوَهُوا مَ

import MapView from 'react-native-maps';

function MapScreen() {
 const region = {
 latitude: 37.78825,
 longitude: -122.4324,
 latitudeDelta: 0.0922,
 longitudeDelta: 0.0421,
 };

 return (
 <MapView style={{ flex: 1 }} region={region} />
 );
}

و کنترل سطح زوم.

اضافه کردن مارکرها و Callouts

مارکرها مکان هایی را در نقشه مشخص می کنند، می توانند یک عنوان و توضیحات را که در هنگام استفاده به عنوان یک فراخوان نشان داده می شود، شامل شوند:

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

<MapView style={{ flex: 1 }} initialRegion={region}>
 <Marker
 coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
 title="Coffee Shop"
 description="Best espresso in town"
 >
 <Callout>
 <View>
 <Text>Coffee Shop</Text>
 <Text>Best espresso in town</Text>
 </View>
 </Callout>
 </Marker>
</MapView>

مارکرها و خوشه بندی

گزینه ی پیش فرض را با استفاده از یک دید سفارشی جایگزین کنید.

<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
 <Image source={require('./custom-pin.png')} style={{ width: 40, height: 40 }} />
</Marker>

هنگام برخورد با صدها یا هزاران نشانگر، از خوشه بندی برای بهبود عملکرد کتابخانه ها مانند استفاده کنید، مدیریت گروهی و سطح زوم را به طور خودکار مدیریت کنید.

شکل های نقاشی: Polylines و Polygons

برای راه ها یا مرزها، از اجزای استفاده کنید و [FLT16] استفاده کنید.

import MapView, { Polyline, Polygon } from 'react-native-maps';

<MapView>
 <Polyline
 coordinates={[
 { latitude: 37.78825, longitude: -122.4324 },
 { latitude: 37.78900, longitude: -122.4340 },
 ]}
 strokeColor="#000"
 strokeWidth={3}
 />
 <Polygon
 coordinates={[
 { latitude: 37.788, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.433 },
 ]}
 fillColor="rgba(0, 125, 255, 0.3)"
 strokeColor="blue"
 />
</MapView>

دانلود فیلم Animating The Map

دوربین را با استفاده از (FLT 18) یا [FLT 19] حرکت دهید.

const mapRef = useRef(null);

const moveToLocation = (lat, lng) => {
 mapRef.current.animateToRegion({
 latitude: lat,
 longitude: lng,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 1000); // duration in ms
};

دسترسی به User Location

نصب خدمات واکنشی-native-geolocation

npm install react-native-geolocation-service
cd ios && pod install

کتابخانه نیاز به تنظیم مجوز در هر دو سیستم عامل برای آندروید 6+، مجوز اجرا زمان با استفاده از و یا یک کتابخانه اختصاصی مانند [FLT 23] در iOS شامل یا [FLT 25 کلید در [FLT 26].

گرفتن یک موقعیت واحد

import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 console.log(`User location: ${latitude}, ${longitude}`);
 },
 (error) => {
 console.warn(error.code, error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

پیگیری مستمر

برای حرکت در زمان واقعی (به عنوان مثال، پیگیری تناسب اندام)، از استفاده کنید:

const watchId = Geolocation.watchPosition(
 (position) => {
 setUserLocation(position.coords);
 },
 (error) => console.warn(error),
 { enableHighAccuracy: true, distanceFilter: 5, interval: 3000 }
);

// Later, when no longer needed:
Geolocation.clearWatch(watchId);

موقعیت مکانی

برای برنامه هایی که به روز رسانی مکان نیاز دارند حتی زمانی که در پس زمینه (به عنوان مثال ردیابی تحویل)، مراحل اضافی مورد نیاز است:

  • iOS: حالت های پیش زمینه را فعال کنید و "به روز رسانی های Location" را بررسی کنید.
  • [[۱] [۱۰] [۱۰] [۱۰] [۱۰] [۱] [۱]] [[۱۰]]] [[۳]]] از یک سرویس پیش زمینه با یک اعلان مداوم استفاده کنید.

همیشه مجوز مناسب (FLT:34) را قبل از امکان ردیابی پس زمینه به دست آورید و به کاربران اطلاع دهید که به وضوح دستورالعمل های فروشگاه App را رعایت کنند.

اجازه مدیریت بهترین تمرین ها

درخواست مجوز تماس پس از کاربر زمینه برای چرا محل مورد نیاز است.استفاده از یک کتابخانه مانند برای مدیریت مجوز های متقابل پلت فرم:

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const requestLocationPermission = async () => {
 const permission = Platform.select({
 ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
 android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
 });

 const result = await request(permission);
 return result === RESULTS.GRANTED;
};

انکار را به صورت ماهرانه انجام دهید – به عنوان مثال، یک هشدار را نشان دهید که چرا مکان مورد نیاز است و کاربر را به تنظیمات سیستم هدایت می کند.

خطای مدیریت و Edge Cases

  • [در این باره] تکذیب شد: بازگشت به یک منطقه پیش فرض یا کاربر را به مکان از تنظیمات.
  • ثبت نام در دسترس نیست؛ هنگامی که سیگنال GPS در داخل خانه گم می شود، از برای پذیرش داده های ذخیره شده استفاده کنید.
  • خطای شبکه: بارگذاری نقشه ممکن است شکست بخورد اگر هیچ اینترنت وجود ندارد.
  • [در این باره]: [[[۱]] [۱۰] [۱]] [۱۰] [۱]] [۱۰] [۱] [۱]] [۱]] [۱] [۱۰] [۱] [۱]] [۱۰] [۱] [۱]] [۱] [۱۰] [۱] [۱]] [۱] [۱] [۱] [۵] [۵] [۵] [۵] [۵] [۵] [۵] [۵] [۵] [۵] [۵]] [۵] [۵]]]] [۵]] [۵] [۵] [۵] [۵] [۵] [۵]]]]] [۵] [۵] [۵] [۵] [۵] [۵] [۵] [۵] [بر [بر [بر [بر [بر [براى [براى کاربر] [براى کاربر [براى کاربر [براى کاربر [براى کاربر [براى کاربر [براى کاربر] [براى کاربر [براى کاربرى [براى کاربر [براى کاربر [براى کاربرى] [براى کاربر] [براى کاربر] [بر

بهینه سازی عملکرد

کاهش بی ارزشی Re-renders

  • و از هر گونه تغییر و تغییر در هر حالت، پرهیز کنید.
  • استفاده از برای کودکان مانند نشانگرهای سفارشی.
  • در این هنگام به روز رسانی های مکان یا محل سکونت در ، .

دانلود بازی Limit Map Updates

  • استفاده از (FLT 43) تنها به روز رسانی زمانی که کاربر حداقل فاصله را حرکت می دهد.
  • از جمع آوری مجدد کل نقشه با نگه داشتن داده های نشانگر در یک اجتناب کنید، زمانی که مجموعه نشانگر تغییر نمی کند.

مدیریت خوشه

هنگامی که بسیاری از نشانه ها را نشان می دهد، خوشه یا بار را تنها نشانگرهای قابل مشاهده در پورت فعلی با استفاده از بارگیری می کند.

بررسی های پلتفرم-Specifications

iOS iOS iOS

  • اپل Maps به یک کلید API نیاز ندارد، اما فاقد برخی از ویژگی های Google Maps مانند ساختمان های 3D و ناوبری داخلی است.
  • برای Google Maps در iOS، شما باید کلید API را برای (FLT:46) اضافه کنید و Google Maps SDK را لینک کنید.
  • به یاد داشته باشید که برای ساخت و ساز (FLT 47)

Android Android Android

  • Google Maps نیاز به یک کلید API معتبر در مانیفست دارد و آن را از کنسول Google Cloud دریافت می کند و “Maps SDK for Android” را فعال می کند.
  • در برخی از دستگاه ها، مکان های مسخره می توانند مداخله کنند و از (FLT 48) برای تشخیص استفاده کنند.
  • از خدمات پیش زمینه برای مکان پس زمینه استفاده کنید.برنامه باید یک اعلان برای زنده ماندن را نشان دهد.

ویژگی های Location

  • از شبیه ساز برای تست نقشه ها و مکان های مسخره استفاده کنید.در Xcode، “Simulate Location” را قادر می سازد تا هر مختصاتی را تنظیم کند.
  • برای Android Studio از “کنترل های پیشرفته” برای ارسال داده های GPS استفاده کنید.
  • تست دستگاه های واقعی برای تأیید دقت GPS، گفتگو های مجوز و رفتار ردیابی پس زمینه.
  • تست های واحد برای منطق مجوز و آزمون های UI با ابزارهایی مانند (FLT 49) یا (FLT:50) را بنویسید.

منابع خارجی

  • [[ویرایش] [۱] [۱۰] [۱] [۱۰]
  • [[ویرایش] [۱] [۱۰] [۱] [۱] [۱۰] [۱] [۱] [۱] [۱] [۱] [۱]
  • [[ویرایش] [۱] [۱۰] [۱] [۱۰] [۱] [۱۰] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱۰] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱] [۱]
  • [[ویرایش] [۱] [۱]

نتیجه گیری

یکپارچه سازی نقشه ها و جغرافیایی در برنامه های React Native رابط های استاتیک را به تجربیات پویا و آگاه از مکان تبدیل می کند. با استفاده از کتابخانه های قوی مانند نقشه های واکنش پذیر و واکنش دهنده خدمات جابجایی-نافعال، توسعه دهندگان می توانند نقشه های غنی از ویژگی، ردیابی کاربر زمان واقعی و مدیریت مجوز بدون درز را اضافه کنند.