كيفية اختيار مكان من mapview فى react native

لمعرفة الاحداثيات عند مكان ضغط المستخدم يمكنك الاستفادة من التابع onPress كما يلي

<MapView style={{flex: 1}}
         onPress={({ coordinate, position}) => {
  	const {latitude, longitude} = coordinate
  	// الان اصبح لديك الاحداثيات التي تم الضغط عليها
  }}>
</MapView>

لمعرفة وجود مكان مميز عند تلك الاحداثيات، يجب الاستعلام عن ذلك من مزود معلومات الاماكن المميزة حسب تطبيقك :

• اما من بيانات الاماكن المميزة التي يوفرها تطبيقك (في قاعدة البيانات لديك مثلا)
• أو الاستفادة بالاشتراك بمزود معلومات خرائط طرف ثالث مثل Google Maps

بتاريخ 32 دقائق مضت قال Hassan Hedr:

لمعرفة الاحداثيات عند مكان ضغط المستخدم يمكنك الاستفادة من التابع onPress كما يلي

<MapView style={{flex: 1}}
         onPress={({ coordinate, position}) => {
  	const {latitude, longitude} = coordinate
  	// الان اصبح لديك الاحداثيات التي تم الضغط عليها
  }}>
</MapView>

لمعرفة وجود مكان مميز عند تلك الاحداثيات، يجب الاستعلام عن ذلك من مزود معلومات الاماكن المميزة حسب تطبيقك :

• اما من بيانات الاماكن المميزة التي يوفرها تطبيقك (في قاعدة البيانات لديك مثلا)
• أو الاستفادة بالاشتراك بمزود معلومات خرائط طرف ثالث مثل Google Maps

ظهر لى هدا الايرور 

 TypeError: undefined is not an object (evaluating 'coordinate.latitude')

جرب تمرير احداثيات منطقة العرض initialRegion كالتالي (يمكنك تغيير الاحداثيات لاي مكان تريد عرضه)

<MapView style={{flex: 1}}
         initialRegion={{
           latitude: 37.78825,
           longitude: -122.4324,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421,
         }}
         onPress={({ coordinate, position}) => {
            const {latitude, longitude} = coordinate
            // الان اصبح لديك الاحداثيات التي تم الضغط عليها
         }}>
</MapView>

بتاريخ 15 ساعات قال Hassan Hedr:

جرب تمرير احداثيات منطقة العرض initialRegion كالتالي (يمكنك تغيير الاحداثيات لاي مكان تريد عرضه)

<MapView style={{flex: 1}}
         initialRegion={{
           latitude: 37.78825,
           longitude: -122.4324,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421,
         }}
         onPress={({ coordinate, position}) => {
            const {latitude, longitude} = coordinate
            // الان اصبح لديك الاحداثيات التي تم الضغط عليها
         }}>
</MapView>

 

للأسف يعرض لى نفس الخطأ

احتاج الى تفاصيل اكثر لتحديد المشكلة

• على اي نظام تقوم بالاختبار Android أم IOS ؟
• جرب تمرير الخاصية "provider="google
• هل الخريطة تظهر وهل يمكنك ارفاق صورة للخريطة وللخطأ ؟

بتاريخ 1 ساعة قال Hassan Hedr:

احتاج الى تفاصيل اكثر لتحديد المشكلة

• على اي نظام تقوم بالاختبار Android أم IOS ؟
• جرب تمرير الخاصية "provider="google
• هل الخريطة تظهر وهل يمكنك ارفاق صورة للخريطة وللخطأ ؟

تمت الحل كودك كان يحتاج الى تعديل بسيط

هل يمكنك نشر الكود بعد التعديل، لكي يتطلع عليه من يمر بنفس المشكلة لاحقًا

بتاريخ On 8/17/2021 at 17:53 قال Hassan Hedr:

هل يمكنك نشر الكود بعد التعديل، لكي يتطلع عليه من يمر بنفس المشكلة لاحقًا

هدا هو الحل

onMapViewOress={(coordinate: any) => {

console.log(coordinate.nativeEvent.coordinate);

setSelectedLocation(coordinate.nativeEvent.coordinate);

}}

يبدو انه عند الضغط أول مرة تكون الاحداثيات غير معروفة لذلك يجب التاكد من وجود القيمة coordinate قبل محاولة الوصول الى الاحداثيات منها كما يلي

onPress={({ coordinate }) => {
  if(!coordinate) return // التاكد من وجود قيمة الاحداثيات
  
  const {latitude, longitude} = coordinate
}}>