واجهة برمجة تطبيقات تحديد الموقع الجغرافي على الويب
حدد موقع المستخدم
يتم استخدام HTML Geolocation API للحصول على الموقع الجغرافي للمستخدم.
نظرًا لأن هذا يمكن أن يضر بالخصوصية ، فلن يكون المنصب متاحًا ما لم يوافق عليه المستخدم.
ملاحظة: تحديد الموقع الجغرافي هو الأكثر دقة للأجهزة المزودة بنظام تحديد المواقع العالمي (GPS) ، مثل الهاتف الذكي.
يتم دعم Geolocation API في جميع المتصفحات:
| Yes | Yes | Yes | Yes | Yes |
ملاحظة: اعتبارًا من Chrome 50 ، ستعمل واجهة برمجة تطبيقات الموقع الجغرافي فقط على السياقات الآمنة مثل HTTPS. إذا كان موقعك مستضافًا على مصدر غير آمن (مثل HTTP) ، فلن تعمل طلبات الحصول على موقع المستخدمين بعد الآن.
باستخدام واجهة برمجة تطبيقات تحديد الموقع الجغرافي
يتم getCurrentPosition()استخدام الطريقة لإرجاع موضع المستخدم.
يعرض المثال أدناه خط الطول وخط العرض لموضع المستخدم:
مثال
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
شرح المثال:
- تحقق مما إذا كان تحديد الموقع الجغرافي مدعومًا
- إذا كان مدعومًا ، فقم بتشغيل طريقة getCurrentPosition (). إذا لم يكن كذلك ، اعرض رسالة للمستخدم
- إذا نجحت طريقة getCurrentPosition () ، فإنها تُرجع كائن إحداثيات إلى الوظيفة المحددة في المعلمة (showPosition)
- تقوم الدالة showPosition () بإخراج خطوط الطول والعرض
المثال أعلاه هو برنامج نصي أساسي للغاية لتحديد الموقع الجغرافي ، بدون معالجة أخطاء.
معالجة الأخطاء والرفض
يتم استخدام المعلمة الثانية getCurrentPosition()للطريقة لمعالجة الأخطاء. تحدد وظيفة للتشغيل إذا فشلت في الحصول على موقع المستخدم:
مثال
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
عرض النتيجة في الخريطة
لعرض النتيجة في الخريطة ، تحتاج إلى الوصول إلى خدمة الخرائط ، مثل خرائط Google.
في المثال أدناه ، يتم استخدام خط العرض وخط الطول لإظهار الموقع في خريطة Google (باستخدام صورة ثابتة):
مثال
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
معلومات خاصة بالموقع
توضح هذه الصفحة كيفية إظهار موقع المستخدم على الخريطة.
يُعد تحديد الموقع الجغرافي أيضًا مفيدًا جدًا للمعلومات الخاصة بالموقع ، مثل:
- أحدث المعلومات المحلية
- إظهار نقاط الاهتمام بالقرب من المستخدم
- التنقل خطوة بخطوة (GPS)
طريقة getCurrentPosition () - إرجاع البيانات
تقوم getCurrentPosition()الطريقة بإرجاع كائن عند النجاح. يتم دائمًا إرجاع خصائص خط الطول وخط الطول والدقة. يتم إرجاع الخصائص الأخرى إذا كانت متوفرة:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
كائن تحديد الموقع الجغرافي - طرق أخرى مثيرة للاهتمام
يحتوي كائن تحديد الموقع الجغرافي أيضًا على طرق أخرى مثيرة للاهتمام:
watchPosition()- يُرجع الموقع الحالي للمستخدم ويستمر في إرجاع الموضع المحدث أثناء تحرك المستخدم (مثل GPS في السيارة).clearWatch()- يوقفwatchPosition()الطريقة.
يوضح المثال أدناه watchPosition()الطريقة. أنت بحاجة إلى جهاز GPS دقيق لاختبار هذا (مثل الهاتف الذكي):
مثال
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>