كيفية استخدام وظيفة تحديد تحديد الموقع الجغرافي HTML5

باستخدام رمز JavaScript بسيط نسبيًا ، يمكنك إنشاء تطبيقات ويب يمكنها تحديد تفاصيل الموقع الجغرافي للمستخدم ، بما في ذلك خط العرض وخط الطول والارتفاع. يمكن أن توفر بعض تطبيقات الويب وظائف التنقل من خلال مراقبة حركة مواقع المستخدم مع مرور الوقت ، والتي تدمج أيضًا أنظمة MAP مثل GoogleMaps API.

يوفر HTML5 واجهة برمجة تطبيقات تحديد الموقع الجغرافي لتحديد موقع المستخدم. يمكننا استخدام هذه الميزة من HTML5 لتطوير التطبيقات بناءً على معلومات تحديد الموقع الجغرافي. تجمع هذه المقالة بين أمثلة لمشاركتها معك كيفية استخدام HTML5 واستخدام واجهات BAIDU و Google MAP للحصول على معلومات الموقع الجغرافية الدقيقة للمستخدمين.

GeoLocation هي ميزة جديدة لـ HTML5 ، لذلك من الممكن فقط تشغيل المتصفحات الحديثة التي تدعم HTML5 ، وخاصة الأجهزة المحمولة المحمولة مثل iPhone ، حيث يكون تحديد الموقع الجغرافي أكثر دقة. أولاً ، نحتاج إلى اكتشاف ما إذا كان متصفح جهاز المستخدم يدعم تحديد الموقع الجغرافي ، وإذا كان الأمر كذلك ، الحصول على معلومات جغرافية. لاحظ أن هذه الميزة قد تنتهك خصوصية المستخدم. ما لم تكن موافقة المستخدم ، فإن معلومات موقع المستخدم غير متوفرة ، لذلك عندما نصل إلى التطبيق ، سنطالب بما إذا كنت نسمح بالتوحيد الجغرافي ، وبالطبع يمكننا اختيار السماح بذلك.

1. FunctionGetLocation () {
2. if (navigator.geolocation) {
3. navigator.geolocation.getCurrentPosition (العرض ، دش) ؛
4. }آخر{
5. التنبيه (المتصفح لا يدعم تحديد الموقع الجغرافي.) ؛
6. }
7. }

يوضح الرمز أعلاه أنه إذا كان جهاز المستخدم يدعم تحديد الموقع الجغرافي ، فقم بتشغيل طريقة getCurrentPosition (). إذا تم تشغيل GetCurrentPosition () بنجاح ، يتم إرجاع كائن الإحداثيات إلى الوظيفة المحددة في عرض المعلمة. يتم استخدام المعلمة الثانية لطريقة getCurrentPosition () للتعامل مع الخطأ ، والذي يحدد الوظيفة التي يتم تشغيلها عندما يفشل موقع المستخدم في الحصول عليه.

دعونا أولاً نلقي نظرة على وظيفة دش الدش () ، الذي يحدد معالجة بعض رموز الخطأ عند الحصول على الموقع الجغرافي للمستخدم:

1. FunctionShowerRor (خطأ) {
2. التبديل (error.code) {
3. caseerror.permission_denied:
4. التنبيه (فشل التوطين ، يرفض المستخدم طلب تحديد الموقع الجغرافي) ؛
5. استراحة؛
6. caseerror.position_unavailable:
7. التنبيه (فشل التوطين ، معلومات الموقع غير متوفرة) ؛
8. استراحة؛
9. caseerror.timeout:
10. تنبيه (فشل تحديد موقع ، يطلب الحصول على مهلة موقع المستخدم) ؛
11. استراحة؛
12. caseerror.unknown_error:
13. التنبيه (فشل التوطين ، فشل نظام تحديد المواقع) ؛
14. استراحة؛
15. }
16. }

دعونا نلقي نظرة على عرض الوظائف () ، ونطلق على خط العرض وخط الطول من التنسيقات للحصول على خط عرض المستخدم وخط الطول.

1. FunctionShowposition (الموضع) {
2. varlat = position.coords.latitude ؛ // latitude
3. varlag = position.coords.longitude ؛ // loncitude
4. التنبيه ('lat:'+lat+'، خط الطول:'+lag) ؛
5. }

استخدم خرائط Baidu وواجهات خرائط Google للحصول على عناوين المستخدم

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

نقوم أولاً بتحديد Div لعرض الموقع الجغرافي على الصفحة ، وتحديد المعرف#Baidu_Geo و ID#Google_Geo على التوالي. نحتاج فقط إلى تعديل عرض الوظائف الرئيسية (). دعونا نلقي نظرة أولاً على تفاعل واجهة خريطة Baidu. نرسل معلومات خطوط الطول والطول إلى واجهة خريطة Baidu من خلال Ajax ، وستقوم الواجهة بإرجاع المعلومات المقاطعة والبلدية والشوارع المقابلة. تقوم واجهة Baidu Map بإرجاع سلسلة من بيانات JSON ، ويمكننا عرض المعلومات المطلوبة إلى Div#Baidu_Geo وفقًا لاحتياجاتنا. لاحظ أنه يتم استخدام مكتبة jQuery هنا ، ويجب تحميل ملف مكتبة jQuery أولاً.

1. FunctionShowposition (الموضع) {
2. varlatlon = position.coords.latitude+'،'+position.coords.longitude ؛
4. // بايدو
5. varurl = http: //api.map.baidu.com/geocoder/v2/؟ ak = c93b5178d7a8ebdb830b9b557abce78b & callback = renderRevers
6. $ .ajax ({
7. النوع: احصل ،
8. نوع البيانات: JSONP ،
9. عنوان URL: URL ،
10. Be Forresend: Function () {
11. $ (#baidu_geo) .html ('موقع ...') ؛
12. } ،
13. النجاح: وظيفة (JSON) {
14. if (json.status == 0) {
15. $ (#baidu_geo) .html (json.result.formatted_address) ؛
16. }
17. } ،
18. خطأ: الدالة (xmlhttprequest ، textstatus ، errorthRown) {
19. $ (#baidu_geo) .html (فشل موقع العنوان latlon+) ؛
20. }
21. }) ؛
22. }) ؛

دعونا نلقي نظرة على تفاعل واجهة خرائط Google. وبالمثل ، نرسل معلومات خط العرض وخط الطول إلى واجهة خرائط Google من خلال AJAX ، وستقوم الواجهة بإرجاع تفاصيل المقاطعة والمدينة والشارع المقابلة. تقوم واجهة خرائط Google أيضًا بإرجاع سلسلة من بيانات JSON. بيانات JSON هذه أكثر تفصيلًا من تلك التي تم إرجاعها بواسطة واجهة خرائط Baidu. يمكننا عرض المعلومات المطلوبة إلى Div#Google_Geo وفقًا لاحتياجاتنا.

1. FunctionShowposition (الموضع) {
2. varlatlon = position.coords.latitude+'،'+position.coords.longitude ؛
4. //جوجل
5. varurl = 'http: //maps.google.cn/maps/api/geocode/json؟ latlng ='+latlon+'& language = cn' ؛
6. $ .ajax ({
7. النوع: احصل ،
8. عنوان URL: URL ،
9. Be Forresend: Function () {
10. $ (#google_geo) .html ('موقع ...') ؛
11. } ،
12. النجاح: وظيفة (JSON) {
13. if (json.status == 'ok') {
14. varresults = json.results ؛
15. $. EECH (النتائج ، الوظيفة (الفهرس ، المصفوفة) {
16. if (index == 0) {
17. $ (#google_geo) .html (Array ['formatted_address']) ؛
18. }
19. }) ؛
20. }
21. } ،
22. خطأ: الدالة (xmlhttprequest ، textstatus ، errorthRown) {
23. $ (#google_geo) .html (فشل موقع العنوان latlon+) ؛
24. }
25. }) ؛
26. }

يدمج الكود أعلاه واجهة BAIDU MAP وواجهة خريطة Google في عرض الوظائف () على التوالي ، ويمكننا أن نسميها وفقًا للموقف الفعلي. بالطبع ، هذا مجرد تطبيق بسيط. يمكننا تطوير العديد من التطبيقات المعقدة بناءً على هذا المثال البسيط. يوصى باستخدام متصفح الهاتف المحمول للوصول إلى العرض التوضيحي التجريبي.