التعليق: بدأ هذا الطبق الجانبي في تعلم HTML5 ، وهو الآن مهتم جدًا بالمعالجة الجغرافية. يتم تنفيذ وظيفة تحديد موقع الخريطة الأساسية بالاشتراك مع Google MAP API. يتم استخدام الخطوات التالية بشكل أساسي: الحصول على الموقع الجغرافي الحالي ، واتصل بأو قبل واجهة برمجة تطبيقات Google MAP للحصول على معلومات الموقع الحالية.
بدأ هذا الطبق الجانبي للتو في تعلم HTML5 ، وهو الآن مهتم تمامًا بالموقع الجغرافي ، ويجمع بين واجهة برمجة تطبيقات Google MAP لتنفيذ وظائف تحديد موقع الخرائط الأساسية.1. احصل على الموقع الجغرافي الحالي
استدعاء الطريقة void getCurrentPosition (onsuccess ، onerror ، الخيارات) ؛
عندما تكون OnSuccess وظيفة رد اتصال يتم تنفيذها عندما تكون معلومات الموقع الحالية ناجحة ، فإن Onerror هي وظيفة رد اتصال عند فشل معلومات الموقع الحالية ، والخيارات هي بعض القوائم المألوفة الاختيارية. المعلمات الثانية والثالثة هي سمات اختيارية.
في وظيفة رد الاتصال ONSUCCESS ، يتم استخدام موضع المعلمة لتمثيل كائن موضع معين وتمثيل الموضع الحالي. لديها الخصائص التالية:
• خط العرض: خط عرض الموقع الجغرافي الحالي.
• خط الطول: خط الطول في الموقع الجغرافي الحالي.
• الارتفاع: ارتفاع الموقع الحالي (فارغ إذا لم يكن من الممكن استرداده).
• الدقة: دقة (بالأمتار) من خط العرض والطول الذي تم الحصول عليه.
• altitudeaccurancy: خط الطول (بالأمتار) من الارتفاع الذي تم الحصول عليه.
• العنوان: اتجاه الجهاز. يتم تمثيله بزاوية دوران في اتجاه عقارب الساعة تواجه الاتجاه الأمامي (لا يمكن استرداده).
• السرعة: السرعة الأمامية للجهاز (بالأمتار/الثانية ، فارغة إذا كان لا يمكن استردادها).
• الطابع الزمني: الوقت الذي تحصل فيه على معلومات تحديد الموقع الجغرافي.
في وظيفة رد الاتصال Onerror ، يتم استخدام معلمة الخطأ. لديها الخصائص التالية:
• الرمز: رمز الخطأ ، مع القيمة التالية.
1. رفض المستخدم خدمة الموقع (قيمة السمة هي 1) ؛
2. لا يمكن الحصول على معلومات الموقع (قيمة السمة هي 2) ؛
3. الحصول على خطأ في مهلة المعلومات (قيمة الخاصية هي 3).
• الرسالة: سلسلة ، تحتوي على معلومات خطأ محددة.
في معلمة الخيارات ، تكون الخصائص الاختيارية هي كما يلي:
• EnableHighcancuracy: ما إذا كانت معلومات تحديد الموقع الجغرافي عالي الدقة مطلوبة.
• مهلة: تعيين وقت المهلة (بالميلي ثانية).
• الحد الأقصى: الوقت الصالح (بالميلي ثانية) لمعلومات تحديد الموقع الجغرافي ذاكرة التخزين المؤقت.
لاحظ أنك تحتاج إلى كتابة الكود التالي لتحديد ما إذا كان المتصفح يدعم HTML5 للحصول على معلومات الموقع الجغرافي ، بحيث تكون متوافقة مع المتصفحات التي لم يتم دعمها مسبقًا.
if (navigator.geolocation) {
// احصل على معلومات الموقع الجغرافي الحالي
navigator.geolocation.getCurrentPosition (onsuccess ، onerror ، reports) ؛
} آخر {
تنبيه ("لا يدعم متصفحك HTML5 للحصول على معلومات تحديد الموقع الجغرافي.") ؛
}
2. اتصل بـ Google MAP API للحصول على معلومات الموقع الحالية
أولاً ، تحتاج إلى الرجوع إلى ملف البرنامج النصي الخاص بـ Google MAP API في الصفحة. طريقة الاستيراد كما يلي.
<script type = "text/javaScript" src = "http://maps.google.com/maps/api/js؟sensor=false"> </script>
ثانياً ، قم بتعيين معلمات الخريطة ، وطريقة الإعداد كما يلي.
// حدد نقطة إحداثي على خريطة Google ، وحدد أيضًا الإحداثيات الأفقية والعمودية لنقطة الإحداثيات.
var latlng = new Google.Maps.latlng (coords.latitude ، coords.longitude) ؛
var myoptions = {
التكبير: 14 ، // اضبط التكبير
المركز: latlng ، // اضبط نقطة مركز الخريطة على نقطة الإحداثيات المحددة
maptypeid: google.maps.maptypeid.roadmap // حدد نوع الخريطة
} ؛
أخيرًا ، قم بإنشاء خريطة وعرضها في الصفحة ، طريقة الإنشاء هي كما يلي
// إنشاء خريطة وعرضها في خريطة الصفحة
var map = new Google.maps.map (document.getElementById ("Map") ، MyOptions) ؛
في النهاية ، يتم تقديم جميع رموز هذا المثال. يظهر الرمز أدناه.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> احصل على الموقع الحالي وعرضه على خرائط Google </title>
<script type = "text/javaScript" src = "http://maps.google.com/maps/api/js؟sensor=false"> </script>
<script type = "text/javaScript">
وظيفة init () {
if (navigator.geolocation) {
// احصل على الموقع الجغرافي الحالي
navigator.geolocation.getCurrentPosition (الوظيفة (الموضع) {
var coords = position.coords ؛
//console.log(position) ؛
// حدد نقطة إحداثي على خريطة Google ، وحدد أيضًا الإحداثيات الأفقية والعمودية لنقطة الإحداثيات.
var latlng = new Google.Maps.latlng (coords.latitude ، coords.longitude) ؛
var myoptions = {
التكبير: 14 ، // اضبط التكبير
المركز: latlng ، // اضبط نقطة مركز الخريطة على نقطة الإحداثيات المحددة
maptypeid: google.maps.maptypeid.roadmap // حدد نوع الخريطة
} ؛
// إنشاء خريطة وعرضها في خريطة الصفحة
var map = new Google.maps.map (document.getElementById ("Map") ، MyOptions) ؛
// إنشاء علامات على الخريطة
var marker = جديد google.maps.marker ({
الموضع: latlng ، // انقر فوق الإحداثيات المحددة أعلاه
الخريطة: خريطة // اضبط هذا التعليق التوضيحي في الخريطة التي قمت بإنشائها للتو
}) ؛
// نافذة موجه العلامة
var infoWindow = جديد google.maps.infowindow ({
المحتوى: "الموقع الحالي: <br/> طويل:" + latlng.lat () + "<br/> البعد:" + latlng.lng () // رسالة موجه في نموذج المطالبة
}) ؛
// افتح نافذة المطالبة
InfoWindow.Open (MAP ، Marker) ؛
} ،
دالة (خطأ) {
// خطأ معالجة
التبديل (error.code) {
الحالة 1:
تنبيه ("خدمة الموقع رفضت.") ؛
استراحة؛
الحالة 2:
تنبيه ("لا يمكن الحصول على معلومات الموقع في الوقت الحالي.") ؛
استراحة؛
الحالة 3:
تنبيه ("احصل على مهلة المعلومات.") ؛
استراحة؛
تقصير:
تنبيه ("خطأ غير معروف.") ؛
استراحة؛
}
}) ؛
} آخر {
تنبيه ("لا يدعم متصفحك HTML5 للحصول على معلومات تحديد الموقع الجغرافي.") ؛
}
}
</script>
</head>
<body>
<viv> </viv>
</body>
</html>