تحديد الموقع الجغرافي في HTML5

HTML5 Geolocation（地理定位）用于定位用户的位置。

亲自试一试：在谷歌地图上显示您的位置

定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。

مثال

<script>
var 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="العرض: " + position.coords.latitude +
  "<br />الطول: " + position.coords.longitude;
  }
</script>

جربها بنفسك

例子解释：

  • 检测是否支持地理定位
  • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
  • 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;
    }
  }

جربها بنفسك

كود الخطأ:

  • Permission denied - لم يتم منح المستخدم الإذن بالتحديد الجغرافي
  • غير متاح الموقع - لا يمكن الحصول على الموقع الحالي
  • Timeout - تجاوز وقت الاستجابة

عرض النتائج على الخريطة

لعرض النتائج على الخريطة، يجب عليك زيارة خدمة الخريطة التي يمكن استخدامها مع الطول العرض، مثل خريطة جوجل أو خريطة بaidu:

مثال

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

جربها بنفسك

في المثال السابق، استخدمنا بيانات الطول العرض العشري التي تم إرجاعها لعرض الموقع على خريطة جوجل (استخدام الصور الثابتة).

سكربتات خريطة جوجل

الرابط أعلاه يوضح كيفية استخدام السكربت لعرض خريطة تفاعلية مع خيارات علامات النقاط، التكبير والسحب.

معلومات الموقع المحدد

هذا الصفحة يعرض كيفية عرض موقع المستخدم على الخريطة. ومع ذلك، فإن تحديد الموقع الجغرافي مفيد جدًا أيضًا للحصول على معلومات عن الموقع المحدد.

مثال:

  • تحديث المعلومات المحلية
  • عرض النقاط المثيرة للاهتمام حول المستخدم
  • نظام التوجيه في السيارة التفاعلي (GPS)

طريقة getCurrentPosition() - بيانات العودة

إذا كانت النتيجة ناجحة، فإن طريقة getCurrentPosition() تعود بالعنصر. ستكون دائمًا latitude و longitude و accuracy من الخصائص. إذا كانت المتاحة، ستكون هناك خصائص أخرى.

الخصائص الوصف
coords.latitude العرض العشري
coords.longitude الطول العرض العشري
coords.accuracy دقة الموقع
coords.altitude الارتفاع، فوق مستوى سطح البحر بالأمتار
coords.altitudeAccuracy دقة ارتفاع الموقع
coords.heading اتجاه، من الشمال المطلق بالدرجات
coords.speed السرعة، بمتر/ثانية
timestamp التاريخ والوقت الردود

مثل Geolocation - طرق مثيرة للاهتمام أخرى

watchPosition() - تعود إلى موقع المستخدم الحالي وتستمر في العودة إلى تحديث موقع المستخدم عند الحركة (مثل GPS في السيارة).

clearWatch() - تتوقف طريقة watchPosition()

يظهر المثال التالي طريقة watchPosition(). تحتاج إلى جهاز GPS دقيق لتجربة هذا المثال (مثل iPhone):

مثال

<script>
var 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="العرض: " + position.coords.latitude +
  "<br />الطول: " + position.coords.longitude;
  }
</script>

جربها بنفسك