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

تحديد الموقع الجغرافي عبارة عن واجهة برمجة تطبيقات ويب وفقًا لمعيار HTML5، يمكنك استخدامها للحصول على معلومات الموقع الحالي (الإحداثيات) للجهاز. تحتوي واجهة برمجة التطبيقات هذه على ثلاث طرق: getCurrentPosition، وwatchPosition، وclearWatch الطريقتان المتبقيتان تتطلبان الاستخدام معًا!

التحقق من توافق المتصفح:

يتم نشر واجهة برمجة التطبيقات من خلال كائن navigator.geolocation فقط في حالة وجود هذا الكائن، يمكن استخدام خدمة تحديد الموقع الجغرافي الخاصة به.

 if (navigator.geolocation) { // كود تحديد الموقع مكتوب هنا} else { تنبيه ("الموقع الجغرافي غير مدعوم في متصفحك")}

الحصول على الموقع الحالي للمستخدم:

استخدم طريقة getCurrentLocation للحصول على معلومات موقع المستخدم. تحتوي هذه الطريقة على ثلاث معلمات:

 // معلمات التهيئة const options = { // دقة عالية: صحيح / خطأ تمكين HighAccuracy: صحيح، // الحد الأقصى لوقت انتظار وحدة الاستجابة: المهلة بالمللي ثانية: 5 * 1000، // أطول موقع ذاكرة تخزين مؤقت يرغب التطبيق في قبوله maximAge: 0}// وظيفة رد الاتصال الناجحة: تحتوي البيانات على معلومات الموقع const HandleSuccess = data => console.log(data)// فشل وظيفة رد الاتصال: خطأ يحتوي على معلومات خطأ const HandleError = error => console.log(error)if (navigator.geolocation) { // رمز تحديد الموقع مكتوب هنا navigator.geolocation.getCurrentPosition(handleSuccess, HandleError, options)} else { تنبيه("التحديد الجغرافي غير مدعوم في متصفحك") }

إليك الكود الذي يحتوي على مزيد من التفاصيل:

 const HandleSuccess = data => { const { coords, // الطابع الزمني لمعلومات الموقع // الطابع الزمني عند الحصول على معلومات الموقع بنجاح} = data const { الدقة، // دقة النتيجة التي تم إرجاعها (بالأمتار) الارتفاع، // بالنسبة إلى الأفقي دقة ارتفاع الطائرة، // إرجاع عنوان دقة الارتفاع (بالأمتار)، // اتجاه سفر الجهاز المضيف، في اتجاه عقارب الساعة من خط العرض الشمالي، // خط الطول لخط العرض، // سرعة خط الطول // سرعة انتقال الجهاز} = الإحداثيات // اطبعها وانظر console.log('timestamp =', timestamp) console.log('accuracy =', الدقة) console.log('altitude =', height) console .log( 'دقة الارتفاع ='، دقة الارتفاع) console.log('العنوان ='، العنوان) console.log('latitude ='، خط العرض) console.log('خط الطول ='، خط الطول) console.log('speed =', speed)}const HandleError = error => { Switch (error.code) { الحالة 1: console.log('تم رفض طلب خدمة الموقع') حالة الاستراحة 2: console.log(' لا يمكن الحصول على معلومات الموقع مؤقتًا)) حالة الاستراحة 3: console.log('مهلة للحصول على المعلومات') حالة الاستراحة 4: console.log('خطأ غير معروف') فاصل }}const opt ​​​​= { // دقة عالية: صحيح / خطأ تمكين HighAccuracy: صحيح، // الحد الأقصى لوقت انتظار الاستجابة الوحدة: المهلة بالمللي ثانية: 5 * 1000، // الحد الأقصى لعمر موقع ذاكرة التخزين المؤقت الذي يرغب التطبيق في قبولهmaxAge: 0} if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleSuccess ، HandleError، opt) } else { تنبيه ("الموقع الجغرافي غير مدعوم في متصفحك")}

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.