كيفية استخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي

باستخدام Geolocation API ، يمكننا أن نطلب من المتصفح إحداثيات موقع المستخدم

يعرض المتصفح ملفnavigator.geolocation، والتي من خلالها سنقوم بجميع عمليات تحديد الموقع الجغرافي

إنه متاح فقط على الصفحات التي يتم عرضها باستخدام HTTPS ، لأغراض أمنية ، وهو متاح في جميع المتصفحات الحديثة.

navigator.geolocation

The geolocation object

منذwindowهو الكائن العالمي ، يمكننا الوصول إليهnavigatorبدون تحديدwindow.navigator

الwindow.navigatorالخاصية التي تتعرض لها المتصفحات تشير إلى أكائن Navigatorوهوكائن الحاويةالتي تجعل الكثير من واجهات برمجة تطبيقات Web Platform متاحة لنا.

الgeolocationيوفر الكائن الطرق التالية:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

يستخدم الأول للحصول على إحداثيات الموقع الحالي. عندما نطلق على هذه الطريقة لأول مرة ، يطلب المتصفح تلقائيًا من المستخدم الإذن لمشاركة هذه المعلومات معنا.

هكذا تبدو هذه الواجهة في Chrome:

The permission screen in Chrome

على Firefox:

The permission screen in Firefox

وعلى Safari:

The permission screen in Safari

يجب القيام بذلك مرة واحدة فقط لكل أصل. يمكنك تغيير القرار الذي اتخذته والتراجع عن قرار الإذن. هذه هي طريقة القيام بذلك باستخدام Chrome ، من خلال النقر فوق رمز القفل بالقرب من المجال:

Permission details

بمجرد منح هذا الإذن ، يمكننا المتابعة.

الحصول على منصب المستخدم

لنبدأ بنموذج التعليمات البرمجية هذا:

navigator.geolocation.getCurrentPosition(() => {})

يجب أن تظهر لوحة الإذن. اسمح بالإذن.

لاحظ كيف مررت فارغةوظيفة السهم، لأن الوظيفة تريد وظيفة رد الاتصال.

تم تمرير هذه الوظيفةPositionالكائن الذي يحتوي على الموقع الفعلي:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
})

هذا الكائن له خاصيتان:

الCoordinatesيأتي الكائن بعدة خصائص تحدد الموقع:

  • accuracyدقة الموقع المقاس ، معبراً عنها بالأمتار
  • altitudeتم قياس قيمة الارتفاع
  • altitudeAccuracyدقة الارتفاع المقاسة معبراً عنها بالأمتار
  • headingالاتجاه الذي يسير فيه الجهاز. معبراً عنها بالدرجات (0 = الشمال ، الشرق = 90 ، الجنوب = 180 ، الغرب = 270)
  • latitudeتم قياس قيمة خط العرض
  • longitudeقيمة خط الطول المقاسة
  • speedالسرعة التي يتحرك بها الجهاز ، معبرًا عنها بالأمتار في الثانية

اعتمادًا على التنفيذ والجهاز ، سيكون بعض هؤلاءnull. على سبيل المثال ، على Chrome الذي يعمل على جهاز MacBook Air الخاص بي ، حصلت على قيم فقط لـaccuracyوlatitudeوlongitude.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude)
  console.log(position.coords.longitude)
})

مراقبة الموقف من أجل التغييرات

بالإضافة إلى الحصول على منصب المستخدم مرة واحدة والذي يمكنك القيام به باستخدامهgetCurrentPosition()، يمكنك استعمال الwatchPosition()طريقةnavigator.geolocationلتسجيل وظيفة رد الاتصال التي سيتم استدعاؤها عند كل تغيير يقوم الجهاز بإرساله إلينا.

استعمال:

navigator.geolocation.watchPosition(position => {
	console.log(position)
})

بالطبع سيطلب المتصفح الإذن بهذه الطريقة أيضًا ، إذا لم يكن قد تم منحه بالفعل.

يمكننا التوقف عن مراقبة الموقف عن طريق الاتصال بـnavigator.geolocation.clearWatch()طريقة تمريرهidعاد من قبلwatchPosition():

const id = navigator.geolocation.watchPosition(position => {
	console.log(position)
})

//stop watching after 10 seconds setTimeout(() => { navigator.geolocation.clearWatch(id) }, 10 * 1000)

إذا رفض المستخدم الإذن

هل تتذكر نافذة الإذن المنبثقة التي يعرضها المتصفح عندما نتصل بإحدى الطرق للحصول على الوظيفة؟

إذا نفى المستخدم ذلك ، فيمكننا اعتراض هذا السيناريو عن طريق إضافة وظيفة معالجة الأخطاء ، كمعامل ثاني إلى الطرقgetCurrentPosition()وwatchPosition().

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
})

يحتوي الكائن الذي تم تمريره إلى المعلمة الثانية على ملفcodeخاصية التمييز بين أنواع الأخطاء:

  • 1يعني رفض الإذن
  • 2يعني الموقف غير متوفر
  • 3يعني المهلة

إضافة المزيد من الخيارات

عندما تحدثت عن الأخطاء سابقًا ، ذكرت خطأ المهلة. قد يستغرق البحث عن المركز بعض الوقت ويمكننا تعيين الحد الأقصى للوقت المسموح به لإجراء العملية ، كخيار.

يمكنك إضافة مهلة عن طريق إضافة معامل ثالث إلى الأساليبgetCurrentPosition()وwatchPosition()، شيء.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {

})

داخل هذا الكائن يمكننا تمرير الخصائص

  • timeoutلتعيين عدد المللي ثانية قبل خروج أخطاء الطلب
  • maximumAgeلتعيين الحد الأقصى "للعمر" للموضع الذي يخزنه المتصفح مؤقتًا. نحن لا نقبل واحدة أقدم من المقدار المحدد بالمللي ثانية
  • enableHighAccuracyمنطقية بشكل افتراضيfalse، يتطلب موقعًا بأعلى مستوى ممكن من الدقة (والذي قد يستغرق المزيد من الوقت والمزيد من القوة)

استخدام المثال:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
  timeout: 1000,
  maximumAge: 10000,
  enableHighAccuracy: true
})

المزيد من دروس المتصفح: