ما نريد أن نتعلمه اليوم هو استخدام تحديد الموقع الجغرافي لتنفيذ وظائف تحديد المواقع. يمكننا الحصول على كائن تحديد الموقع الجغرافي من خلال التنقل. تحديد الموقع ، والذي يوفر الطرق التالية:
getCurrentPosition (رد الاتصال ، errorcallback ، الخيارات): احصل على الموقع الحالي ؛
مراقبة (رد الاتصال ، الخطأ ، الخيارات): ابدأ في مراقبة الموضع الحالي ؛
Clearwatch (ID): توقف عن مراقبة الموقع الحالي.
ملاحظة: المستعرض المستخدم في المثال التالي هو Chrome. باستخدام المتصفحات الأخرى ، لا يمكنني ضمان أن نتائج التشغيل تتفق مع النتائج التي يعرضها المثال.
1. احصل على الموقع الحاليسوف نستخدم طريقة getCurrentPosition للحصول على الوضع الحالي. لن يتم إرجاع معلومات الموقف مباشرة في شكل نتيجة. نحتاج إلى استخدام وظيفة رد الاتصال لمعالجتها. سيكون هناك بعض التأخير في الحصول على إحداثيات ، وسوف تطلب منك أيضًا أذونات الوصول. دعونا نلقي نظرة على المثال التالي:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
الجدول {الحدود: الانهيار ؛}
th ، td {padding: 4px ؛}
th {text-align: right ؛}
</style>
</head>
<body>
<griding>
<tr>
<th> خط الطول: </th>
<td id = "loncitude">-</td>
<th> خط العرض: </th>
<td id = "latitude">-</td>
</r>
<tr>
<h> الارتفاع: </th>
<td id = "الارتفاع">-</td>
<h> الدقة: </th>
<td id = "ducuracy">-</td>
</r>
<tr>
<h> دقة الارتفاع: </th>
<td id = "altitudeaccuracy">-</td>
<th> العنوان: </th>
<td id = "heading">-</td>
</r>
<tr>
<TH> السرعة: </th>
<td id = "speed">-</td>
<h> ختم الوقت: </th>
<td id = "timestamp">-</td>
</r>
</table>
<script>
navigator.geolocation.getCurrentPosition (DisplayPosition) ؛
وظيفة DisplayPosition (pos) {
VAR PROPERTIES = ['LANCHITIDE' ، "Latitude" ، "الارتفاع" ، "الارتفاع" ، "الدقة" ، "altitudeaccuracy" ، "العنوان" ، "السرعة"] ؛
لـ (var i = 0 ، len = properties.length ؛ i <len ؛ i ++) {
var value = pos.coords [الخصائص [i]] ؛
document.getElementById (الخصائص [i]). innerhtml = value ؛
}
document.getElementById ('timestamp'). innerhtml = pos.timestamp ؛
}
</script>
</body>
</html>
يحتوي كائن الموضع الذي تم إرجاعه على خصائصين ، التنسيقات: معلومات الإرجاع ؛ الطابع الزمني: الوقت للحصول على معلومات الإحداثيات. من بينها ، تتضمن التنسيقات الخصائص التالية: Latitude: Latitude ؛ خط الطول: خط الطول. الارتفاع: الارتفاع ؛ الدقة: الدقة (متر) ؛ altitudeaccuracy: دقة الارتفاع (متر) ؛ العنوان: اتجاه السفر ؛ السرعة: سرعة السفر (متر/ثانية).
لن يتم إرجاع جميع المعلومات ، فهذا يعتمد على الجهاز الذي تستضيفه المتصفح. ستعود الأجهزة المحمولة مثل GPS و Sceelerators و Compass معظم المعلومات ، لكن أجهزة الكمبيوتر المنزلية لن تعمل. تعتمد معلومات الموقع التي تم الحصول عليها بواسطة جهاز كمبيوتر منزلي على بيئة الشبكة أو WiFi. دعونا نلقي نظرة على نتائج الجري للمثال أعلاه.
انقر فوق السماح للحصول على معلومات التنسيق.
2. التعامل مع الاستثناءاتنقدم الآن معالجة الاستثناء لـ getCurrentPosition ، والتي يتم تنفيذها باستخدام وظيفة رد الاتصال على errorcallback. يحتوي خطأ المعلمة الذي تم إرجاعه بواسطة الوظيفة على خصائصين ، رمز: رمز نوع الخطأ ؛ الرسالة: رسالة خطأ. يحتوي الرمز على ثلاث قيم: 1: لا يُسمح للمستخدم باستخدام تحديد الموقع الجغرافي ؛ 2: لا يمكن الحصول على معلومات الإحداثيات ؛ 3: يتم الحصول على مهلة المعلومات.
دعونا نلقي نظرة على مثال أدناه:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
الجدول {الحدود: الانهيار ؛}
th ، td {padding: 4px ؛}
th {text-align: right ؛}
</style>
</head>
<body>
<griding>
<tr>
<th> خط الطول: </th>
<td id = "loncitude">-</td>
<th> خط العرض: </th>
<td id = "latitude">-</td>
</r>
<tr>
<h> الارتفاع: </th>
<td id = "الارتفاع">-</td>
<h> الدقة: </th>
<td id = "ducuracy">-</td>
</r>
<tr>
<h> دقة الارتفاع: </th>
<td id = "altitudeaccuracy">-</td>
<th> العنوان: </th>
<td id = "heading">-</td>
</r>
<tr>
<TH> السرعة: </th>
<td id = "speed">-</td>
<h> ختم الوقت: </th>
<td id = "timestamp">-</td>
</r>
<tr>
<h> رمز الخطأ: </th>
<td id = "errcode">-</td>
<h> رسالة الخطأ: </th>
<td id = "errmessage">-</td>
</r>
</table>
<script>
navigator.geolocation.getCurrentPosition (DisplayPosition ، Gealtherror) ؛
وظيفة DisplayPosition (pos) {
Var Properties = ["Longitude" ، "Latitude" ، "الارتفاع" ، "الدقة" ، "altitudeaccuracy" ، "heading" ، "speed"] ؛
لـ (var i = 0 ؛ i <properties.length ؛ i ++) {
var value = pos.coords [الخصائص [i]] ؛
document.getElementById (الخصائص [i]). innerhtml = value ؛
}
document.getElementById ("timestamp"). innerhtml = pos.timestamp ؛
}
وظيفة HandleRror (err) {
document.getElementById ("errcode"). innerhtml = err.code ؛
document.getElementById ("errmessage"). innerhtml = err.message ؛
}
</script>
</body>
</html>
تم رفض التفويض ، نتيجة التشغيل:
3. استخدام عناصر المعلمة الاختيارية تحديد الموقع الجغرافيالخيارات في getCurrentPosition (رد الاتصال ، errorcallback ، الخيارات) لها المعلمات التالية لاستخدامها ، تمكين الإقامة: استخدم أفضل تأثير ؛ مهلة: مهلة (ميلي ثانية) ؛ الحد الأقصى: حدد وقت ذاكرة التخزين المؤقت (مللي ثانية). لنلقي نظرة على المثال التالي:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
الجدول {الحدود: الانهيار ؛}
th ، td {padding: 4px ؛}
th {text-align: right ؛}
</style>
</head>
<body>
<griding>
<tr>
<th> خط الطول: </th>
<td id = "loncitude">-</td>
<th> خط العرض: </th>
<td id = "latitude">-</td>
</r>
<tr>
<h> الارتفاع: </th>
<td id = "الارتفاع">-</td>
<h> الدقة: </th>
<td id = "ducuracy">-</td>
</r>
<tr>
<h> دقة الارتفاع: </th>
<td id = "altitudeaccuracy">-</td>
<th> العنوان: </th>
<td id = "heading">-</td>
</r>
<tr>
<TH> السرعة: </th>
<td id = "speed">-</td>
<h> ختم الوقت: </th>
<td id = "timestamp">-</td>
</r>
<tr>
<h> رمز الخطأ: </th>
<td id = "errcode">-</td>
<h> رسالة الخطأ: </th>
<td id = "errmessage">-</td>
</r>
</table>
<script>
خيارات var = {
EnableHighcancuracy: False ،
مهلة: 2000 ،
الحد الأقصى: 30000
} ؛
navigator.geolocation.getCurrentPosition (DisplayPosition ، HandleRor ، Options) ؛
وظيفة DisplayPosition (pos) {
Var Properties = ["Longitude" ، "Latitude" ، "الارتفاع" ، "الدقة" ، "altitudeaccuracy" ، "heading" ، "speed"] ؛
لـ (var i = 0 ؛ i <properties.length ؛ i ++) {
var value = pos.coords [الخصائص [i]] ؛
document.getElementById (الخصائص [i]). innerhtml = value ؛
}
document.getElementById ("timestamp"). innerhtml = pos.timestamp ؛
}
وظيفة HandleRror (err) {
document.getElementById ("errcode"). innerhtml = err.code ؛
document.getElementById ("errmessage"). innerhtml = err.message ؛
}
</script>
</body>
</html>
4. شاشة تغيير موقعأدناه نقدم استخدام طريقة مراقبة لتنفيذ تغييرات الموضع. طريقة الاستخدام الخاصة بها هي نفسها getCurrentPosition. دعونا نلقي نظرة على المثال:
<! doctype html>
<html>
<head>
<title> مثال </title>
<style>
الجدول {الحدود: الانهيار ؛}
th ، td {padding: 4px ؛}
th {text-align: right ؛}
</style>
</head>
<body>
<griding>
<tr>
<th> خط الطول: </th>
<td id = "loncitude">-</td>
<th> خط العرض: </th>
<td id = "latitude">-</td>
</r>
<tr>
<h> الارتفاع: </th>
<td id = "الارتفاع">-</td>
<h> الدقة: </th>
<td id = "ducuracy">-</td>
</r>
<tr>
<h> دقة الارتفاع: </th>
<td id = "altitudeaccuracy">-</td>
<th> العنوان: </th>
<td id = "heading">-</td>
</r>
<tr>
<TH> السرعة: </th>
<td id = "speed">-</td>
<h> ختم الوقت: </th>
<td id = "timestamp">-</td>
</r>
<tr>
<h> رمز الخطأ: </th>
<td id = "errcode">-</td>
<h> رسالة الخطأ: </th>
<td id = "errmessage">-</td>
</r>
</table>
<button id = "pressme"> إلغاء مشاهدة </button>
<script>
خيارات var = {
EnableHighcancuracy: False ،
مهلة: 2000 ،
الحد الأقصى: 30000
} ؛
var watchid = navigator.geolocation.watchposition (DisplayPosition ، HandleRror ، Options) ؛
document.getElementById ("pressme"). onClick = function (e) {
navigator.geolocation.clearwatch (WatchId) ؛
} ؛
وظيفة DisplayPosition (pos) {
Var Properties = ["Longitude" ، "Latitude" ، "الارتفاع" ، "الدقة" ، "altitudeaccuracy" ، "heading" ، "speed"] ؛
لـ (var i = 0 ؛ i <properties.length ؛ i ++) {
var value = pos.coords [الخصائص [i]] ؛
document.getElementById (الخصائص [i]). innerhtml = value ؛
}
document.getElementById ("timestamp"). innerhtml = pos.timestamp ؛
}
وظيفة HandleRror (err) {
document.getElementById ("errcode"). innerhtml = err.code ؛
document.getElementById ("errmessage"). innerhtml = err.message ؛
}
</script>
</body>
</html>
عند النقر فوق زر Watch Watch ، يتوقف المراقبة.
عنوان التنزيل التجريبي: html5guide.geolocation.zip