English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
تحديد الموقع الجغرافي في HTML5 (Geolocation)用于تحديد موقع المستخدم.
API تحديد الموقع الجغرافي في HTML5用于الحصول على موقع المستخدم.
نظرًا لأن هذه الميزة قد تتعارض مع خصوصية المستخدم، فإن معلومات موقع المستخدم غير متاحة إلا إذا وافق المستخدم.
Internet Explorer 9+، Firefox، Chrome، Safari و Opera يدعمون تحديد الموقع الجغرافي (Geolocation).
ملاحظة: تحديد الموقع الجغرافي (Geolocation) أكثر دقة للهواتف الذكية التي تحتوي على GPS مثل iPhone.
استخدم دالة getCurrentPosition() للحصول على موقع المستخدم.
المثال التالي هو مثال بسيط على تحديد الموقع الجغرافي يمكنه إرجاع خط العرض وخط الطول للمستخدم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>أساسيات التعليمات الالكترونية (oldtoolbag.com)</title>
</head>
<body>
<p id="demo">انقر على الزر للحصول على إحداثيات موقعك الحالي (قد يستغرق وقتًا طويلاً للحصول على المعلومات):</p>
<button onclick="getLocation()">ضغطي هنا</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="هذا المتصفح لا يدعم الحصول على الموقع الجغرافي.";
}
}
function showPosition(position)
{
x.innerHTML="العرض: " + position.coords.latitude + " ;"
"<br>الطول: " + position.coords.longitude;
}
</script>
</body>
</html>الاختبار لرؤية <‹/›示例解析:
检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中指定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度
上面的示例是一个非常基础的地理定位脚本，不含错误处理。
getCurrentPosition() 方法的第二个参数用于处理错误。它指定当获取用户位置失败时运行的函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات (oldtoolbag.com)</title>
</head>
<body>
<p id="demo">انقر على الزر للحصول على إحداثيات موقعك الحالي (قد يستغرق وقتًا طويلاً للحصول على المعلومات):</p>
<button onclick="getLocation()">ضغطي هنا</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="该浏览器不支持定位。";
}
}
function showPosition(position)
{
x.innerHTML="العرض: " + position.coords.latitude + " ;"
"<br>الطول: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="خطأ غير معروف."
break;
}
}
</script>
</body>
</html>الاختبار لرؤية <‹/›错误代码：
Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时
如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>دليل الأساسيات (oldtoolbag.com)</title> </head> <body> <p id="demo">انقر على الزر للحصول على إحداثيات موقعك الحالي (قد يستغرق وقتًا طويلاً للحصول على المعلومات):</p> <button onclick="getLocation()">ضغطي هنا</button>
في المثال السابق، استخدمنا البيانات العشري للطول والعرض لعرض الموقع على خريطة جوجل (استخدام الصور الثابتة).
سكربتات Google Maps
الرابط أعلاه يوضح كيفية استخدام السكربت لعرض خريطة تفاعلية تحتوي على خيارات علامات النقاط، التكبير والسحب.
هذه الصفحة تظهر كيفية عرض موقع المستخدم على الخريطة. ومع ذلك، فإن تحديد الموقع الجغرافي مفيد جدًا أيضًا للحصول على معلومات حول الموقع المحدد.
مثال:
تحديث المعلومات المحلية
عرض النقاط المثيرة للاهتمام حول المستخدم
نظام التوجيه المحمول التفاعلي (GPS)
إذا نجح getCurrentPosition()، فإنه يعود بمفهوم يحتوي دائمًا على الخصائص latitude، longitude وaccuracy. إذا كانت متاحة، فإنه يعود أيضًا بالخصائص التالية.
| الخصائص | الوصف |
| coords.latitude | العرض العشري |
| coords.longitude | الطول العرض عشري |
| coords.accuracy | دقة الموقع |
| coords.altitude | الارتفاع، فوق مستوى سطح البحر بمتر |
| coords.altitudeAccuracy | دقة الارتفاع للموقع |
| coords.heading | اتجاه، من الشمال المطلق بالدرجات |
| coords.speed | السرعة، بمتر/ثانية |
| timestamp | التاريخ والوقت الرد |
watchPosition() - تعود بموقع المستخدم الحالي وتستمر في العودة بمواقع تحرك المستخدم (مثل GPS في السيارة).
clearWatch() - تتوقف طريقة watchPosition()
مثال أدنى يعرض طريقة watchPosition(). تحتاج إلى جهاز GPS دقيق لتجربة هذا المثال (مثل iPhone):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات (oldtoolbag.com)</title>
</head>
<body>
<p id="demo">انقر على الزر للحصول على إحداثيات موقعك الحالي (قد يستغرق وقتًا طويلاً للحصول على المعلومات):</p>
<button onclick="getLocation()">ضغطي هنا</button>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
x.innerHTML="هذا المتصفح لا يدعم الحصول على الموقع الجغرافي.";
}
}
function showPosition(position)
{
x.innerHTML="العرض: " + position.coords.latitude + " ;"
"<br>الطول: " + position.coords.longitude;
}
</script>
</body>
</html>الاختبار لرؤية <‹/›