الفرق بين المراجعتين لصفحة: «Cordova/cordova plugin geolocation»
لا ملخص تعديل |
لا ملخص تعديل |
||
سطر 155: | سطر 155: | ||
===<code>Coordinates</code>=== | ===<code>Coordinates</code>=== | ||
يُربط الكائن <code>Coordinates</code> بكائنٍ <code>Position</code> | يُربط الكائن <code>Coordinates</code> بكائنٍ <code>Position</code>، والذي يتم توفيره لدوال الاستجابة (callback functions) الخاصة بطلبيات (requests) الموقع الحالي. يحتوي هذا الكائن على مجموعة من الخاصيات التي تحدد الإحداثيات الجغرافية لموقعٍ ما. | ||
==== خاصيات ==== | ==== خاصيات ==== | ||
* | * <code>latitude</code>: خط العرض بالدرجات العشرية. (عدد) | ||
* | * <code>longitude</code>: خط الطول بالدرجات العشرية. (عدد) | ||
* | * <code>altitude</code>: ارتفاع الموقع بالأمتار فوق الإهليليج (ellipsoid). (عدد) | ||
* | * <code>accuracy</code>: مستوى الدقة لإحداثيات الطول والعرض بالأمتار. (عدد) | ||
* | * <code>altitudeAccuracy</code>: مستوى دقة إحداثيات الإرتفاع بالأمتار. (عدد) | ||
* | * <code>heading</code>: اتجاه السفر، محدد بعدد الدرجات في اتجاه عقارب الساعة نسبةً إلى الشمال الحقيقي. (عدد) | ||
* | * <code>speed</code>: السرعة الأرضية الحالية للجهاز، تُحدد بعدد الأمتار المقطوعة في الثانية. (عدد) | ||
===ملاحظات خاصة بمنصة أندرويد === | ===ملاحظات خاصة بمنصة أندرويد === | ||
<code>altitudeAccuracy</code>: غير مدعومة في أجهزة أندرويد، حيث تعيد القيمة <code>null</code>. | |||
==PositionError== | ===<code>PositionError</code>=== | ||
يُمرّر الكائن <code>PositionError</code> إلى دالة الاستجابة <code>geolocationError</code> عند حدوث خطأ في navigator.geolocation. | يُمرّر الكائن <code>PositionError</code> إلى دالة الاستجابة <code>geolocationError</code> عند حدوث خطأ في الكائن <code>navigator.geolocation</code>. | ||
=== خاصيات === | ==== خاصيات ==== | ||
* | * <code>code</code>: أحد رموز الخطأ المحددة مسبقًا، والمدرجة أدناه. | ||
* | * <code>message</code>: رسالة خطأ تحتوي تفاصيل الخطأ الذي وقع. | ||
===ثوابت=== | ====ثوابت==== | ||
*<code>PositionError.PERMISSION_DENIED</code> | *<code>PositionError.PERMISSION_DENIED:</code> تُعاد هذه الثابتة عندما يرفض المستخدمون السماح للتطبيق بالوصول إلى معلومات الموقع الجغرافي. تتعلق هذه الثابتة بالمنصة المُستخدمة. | ||
*<code>PositionError.POSITION_UNAVAILABLE</code>: تُعاد عندما يعجز الجهاز عن الحصول على الموقع الجغرافي. بشكل عام، هذا يعني أنّ الجهاز ليس متصلًا بأي بشبكة، أو لا يمكنه الوصول إلى القمر الصناعي. | |||
*<code>PositionError.POSITION_UNAVAILABLE</code> | *<code>PositionError.TIMEOUT</code>: تُعاد عندما يتعذر على الجهاز الحصول على الموقع الجغرافي خلال الوقت المحدد بواسطة <code>timeout</code> المتضمَّن في الخيارات <code>geolocationOptions</code>. عند استخدامها مع التابع <code>navigator.geolocation.watchPosition</code>، يمكن تمرير هذا الخطأ مراراً وتكراراً إلى دالة الاستجابة <code>geolocationError</code> كل <code>timeout</code> ميليثانية. | ||
*<code>PositionError.TIMEOUT</code> | |||
== | == مثال توضيحي == | ||
يمكن | يمكن استخدام هذه الإضافة لمساعدة المستخدمين على العثور على المواقع أو الأحداث القريبة منهم، مثل عروض Groupon، والمنازل المعروضة للبيع، والأفلام المعروضة حاليًا، والأحداث الرياضية والترفيهية وغير ذلك. | ||
تحتوي هذه الفقرة على مجموعة من الأفكار كبداية لاستغلال هذه الإضافة. في الشيفرات البرمجية أدناه، ستتعلم بعض الطرق السهلة لإضافة هذه الميزات إلى تطبيقك. | |||
* | *الحصول على إحداثيات موقعك | ||
* | *الحصول على توقعات الطقس | ||
* | *تلقي تحديثات توقعات الطقس أثناء القيادة | ||
* | *التعرف على موقعك على الخريطة | ||
* | *البحث عن متجر قريب | ||
* | *مطالعة صور عن المنطقة المحيطة بك | ||
== الحصول على إحداثيات موقعك الجغرافي == | === الحصول على إحداثيات موقعك الجغرافي === | ||
<syntaxhighlight lang="javascript">function getWeatherLocation() { | <syntaxhighlight lang="javascript">function getWeatherLocation() { | ||
navigator.geolocation.getCurrentPosition | navigator.geolocation.getCurrentPosition | ||
سطر 200: | سطر 197: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
== الحصول على توقعات الطقس == | === الحصول على توقعات الطقس === | ||
<syntaxhighlight lang="javascript">// | <syntaxhighlight lang="javascript">// دالة النجاح التي ستُمرر إليها الإحداثيات الجغرافية | ||
var onWeatherSuccess = function (position) { | var onWeatherSuccess = function (position) { | ||
Latitude = position.coords.latitude; | Latitude = position.coords.latitude; | ||
سطر 207: | سطر 204: | ||
getWeather(Latitude, Longitude); | getWeather(Latitude, Longitude); | ||
} | } | ||
// | // الحصول على معلومات الطقس انطلاقا من معلومات الموقع الجغرافي | ||
function getWeather(latitude, longitude) { | function getWeather(latitude, longitude) { | ||
// http://openweathermap.org/ الحصول على مفتاح من الموقع | |||
// بالمفتاح الذي حصلت عليه "Your_Key_Here" استبدل السلسلة النصية | |||
var OpenWeatherAppKey = "Your_Key_Here"; | var OpenWeatherAppKey = "Your_Key_Here"; | ||
var queryString = | var queryString = | ||
سطر 234: | سطر 232: | ||
}); | }); | ||
} | } | ||
// | // دالة الاستجابة للخطأ | ||
function onWeatherError(error) { | function onWeatherError(error) { | ||
console.log('code: ' + error.code + '\n' + | console.log('code: ' + error.code + '\n' + | ||
سطر 240: | سطر 238: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
== تلقي تحديثات توقعات الطقس أثناء القيادة == | === تلقي تحديثات توقعات الطقس أثناء القيادة === | ||
<syntaxhighlight lang="javascript">// | <syntaxhighlight lang="javascript">// مراقبة التغيرات في الموقع | ||
function watchWeatherPosition() { | function watchWeatherPosition() { | ||
return navigator.geolocation.watchPosition | return navigator.geolocation.watchPosition | ||
(onWeatherWatchSuccess, onWeatherError, { enableHighAccuracy: true }); | (onWeatherWatchSuccess, onWeatherError, { enableHighAccuracy: true }); | ||
} | } | ||
// | // دالة الاستجابة للنجاح الخاصة بمراقبة تغيرات موقعك | ||
var onWeatherWatchSuccess = function (position) { | var onWeatherWatchSuccess = function (position) { | ||
var updatedLatitude = position.coords.latitude; | var updatedLatitude = position.coords.latitude; | ||
سطر 258: | سطر 256: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
== التعرف على موقعك على الخريطة == | === التعرف على موقعك على الخريطة === | ||
يُوفر | يُوفر كلٌ من الموقعين Bing و Google خدمات الخرائط. سنستخدم في هذا المثال Google. ستحتاج إلى مفتاح، والذي يمكنك الحصول عليه مجانًا إن كنت تحاول تجربة الخدمة. | ||
قم بإضافة مرجع إلى الخدمة | قم بإضافة مرجع إلى الخدمة <code>maps</code>. | ||
<syntaxhighlight lang="javascript"><script src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key"></script></syntaxhighlight> | <syntaxhighlight lang="javascript"><script src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key"></script></syntaxhighlight> | ||
ثم أضف الشيفرة التالية | ثم أضف الشيفرة التالية لاستخدام الخدمة. | ||
<syntaxhighlight lang="javascript">var Latitude = undefined; | <syntaxhighlight lang="javascript">var Latitude = undefined; | ||
var Longitude = undefined; | var Longitude = undefined; | ||
// | // الحصول على الإحداثيات الجغرافية | ||
function getMapLocation() { | function getMapLocation() { | ||
navigator.geolocation.getCurrentPosition | navigator.geolocation.getCurrentPosition | ||
(onMapSuccess, onMapError, { enableHighAccuracy: true }); | (onMapSuccess, onMapError, { enableHighAccuracy: true }); | ||
} | } | ||
// | // دالة النجاح التي تستجيب لإحداثيات الموقع الجغرافي | ||
var onMapSuccess = function (position) { | var onMapSuccess = function (position) { | ||
Latitude = position.coords.latitude; | Latitude = position.coords.latitude; | ||
سطر 279: | سطر 277: | ||
getMap(Latitude, Longitude); | getMap(Latitude, Longitude); | ||
} | } | ||
// | // الحصول على الخريطة انطلاقا من الموقع الجغرافي | ||
function getMap(latitude, longitude) { | function getMap(latitude, longitude) { | ||
var mapOptions = { | var mapOptions = { | ||
سطر 296: | سطر 294: | ||
map.setCenter(marker.getPosition()); | map.setCenter(marker.getPosition()); | ||
} | } | ||
// | // دالة النجاح التي تستجيب للتغيرات في الموقع الجغرافي | ||
var onMapWatchSuccess = function (position) { | var onMapWatchSuccess = function (position) { | ||
var updatedLatitude = position.coords.latitude; | var updatedLatitude = position.coords.latitude; | ||
سطر 306: | سطر 304: | ||
} | } | ||
} | } | ||
// | // دالة الاستجابة للخطأ | ||
function onMapError(error) { | function onMapError(error) { | ||
console.log('code: ' + error.code + '\n' + | console.log('code: ' + error.code + '\n' + | ||
'message: ' + error.message + '\n'); | 'message: ' + error.message + '\n'); | ||
} | } | ||
// | // مراقبة التغيرات في موقعك الجغرافي | ||
function watchMapPosition() { | function watchMapPosition() { | ||
return navigator.geolocation.watchPosition | return navigator.geolocation.watchPosition | ||
سطر 317: | سطر 315: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
== البحث عن متجر قريب == | === البحث عن متجر قريب === | ||
يمكنك استخدام نفس مفتاح جوجل | يمكنك استخدام نفس مفتاح جوجل في هذا المثال. | ||
أضف مرجعًا إلى الخدمة | أضف مرجعًا إلى الخدمة <code>places</code>. | ||
<syntaxhighlight lang="javascript"><script src= | <syntaxhighlight lang="javascript"><script src= | ||
"https://maps.googleapis.com/maps/api/js?key=Your_API_Key&libraries=places"> | "https://maps.googleapis.com/maps/api/js?key=Your_API_Key&libraries=places"> | ||
</script></syntaxhighlight> | </script></syntaxhighlight> | ||
ثم أضف الشيفرة التالية | ثم أضف الشيفرة التالية لاستخدام هذه الخدمة. | ||
<syntaxhighlight lang="javascript">var Map; | <syntaxhighlight lang="javascript">var Map; | ||
var Infowindow; | var Infowindow; | ||
var Latitude = undefined; | var Latitude = undefined; | ||
var Longitude = undefined; | var Longitude = undefined; | ||
// | // الحصول على الإحداثيات الجغرافية | ||
function getPlacesLocation() { | function getPlacesLocation() { | ||
navigator.geolocation.getCurrentPosition | navigator.geolocation.getCurrentPosition | ||
(onPlacesSuccess, onPlacesError, { enableHighAccuracy: true }); | (onPlacesSuccess, onPlacesError, { enableHighAccuracy: true }); | ||
} | } | ||
// | // دالة النجاح للاستجابة لإحداثيات الموقع الجغرافي | ||
var onPlacesSuccess = function (position) { | var onPlacesSuccess = function (position) { | ||
Latitude = position.coords.latitude; | Latitude = position.coords.latitude; | ||
سطر 342: | سطر 340: | ||
getPlaces(Latitude, Longitude); | getPlaces(Latitude, Longitude); | ||
} | } | ||
// | // التعرف على الأمكنة انطلاقا من احداثيات الموقع الجغرافي | ||
function getPlaces(latitude, longitude) { | function getPlaces(latitude, longitude) { | ||
var latLong = new google.maps.LatLng(latitude, longitude); | var latLong = new google.maps.LatLng(latitude, longitude); | ||
سطر 359: | سطر 357: | ||
}, foundStoresCallback); | }, foundStoresCallback); | ||
} | } | ||
// | // دالة النجاح للاستجابة للتغيرات في الموقع الجغرافي | ||
var onPlacesWatchSuccess = function (position) { | var onPlacesWatchSuccess = function (position) { | ||
var updatedLatitude = position.coords.latitude; | var updatedLatitude = position.coords.latitude; | ||
سطر 369: | سطر 367: | ||
} | } | ||
} | } | ||
// | // دالة النجاح للاستجابة للعثور على متجر قريب | ||
function foundStoresCallback(results, status) { | function foundStoresCallback(results, status) { | ||
if (status === google.maps.places.PlacesServiceStatus.OK) { | if (status === google.maps.places.PlacesServiceStatus.OK) { | ||
سطر 377: | سطر 375: | ||
} | } | ||
} | } | ||
// | // لكل متجر عثرت عليه في الخريطة pin وضع علامة | ||
function createMarker(place) { | function createMarker(place) { | ||
var placeLoc = place.geometry.location; | var placeLoc = place.geometry.location; | ||
سطر 389: | سطر 387: | ||
}); | }); | ||
} | } | ||
// | // دالة الخطأ | ||
function onPlacesError(error) { | function onPlacesError(error) { | ||
console.log('code: ' + error.code + '\n' + | console.log('code: ' + error.code + '\n' + | ||
'message: ' + error.message + '\n'); | 'message: ' + error.message + '\n'); | ||
} | } | ||
// | // مراقبة التغير في موقعك الجغرافي | ||
function watchPlacesPosition() { | function watchPlacesPosition() { | ||
return navigator.geolocation.watchPosition | return navigator.geolocation.watchPosition | ||
سطر 400: | سطر 398: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
== مطالعة صور | === مطالعة صور عن المنطقة المحيطة بك === | ||
يمكن أن | يمكن أن تُرفق الصور الرقمية مع الإحداثيات الجغرافية للمكان الذي التُقطت فيه. | ||
استخدم الواجهة البرمجية لموقع Flickr للعثور على الصور التي التُقِطت بالقرب من مكان تواجدك. | استخدم الواجهة البرمجية لموقع Flickr للعثور على الصور التي التُقِطت بالقرب من مكان تواجدك. ومثل خدمات جوجل، ستحتاج إلى مفتاح، ولكنه مجاني إن كنت ترغب في التجربة وحسب. | ||
<syntaxhighlight lang="javascript">var Latitude = undefined; | <syntaxhighlight lang="javascript">var Latitude = undefined; | ||
var Longitude = undefined; | var Longitude = undefined; | ||
// | // الحصول على الاحداثيات الجغرافية | ||
function getPicturesLocation() { | function getPicturesLocation() { | ||
navigator.geolocation.getCurrentPosition | navigator.geolocation.getCurrentPosition | ||
(onPicturesSuccess, onPicturesError, { enableHighAccuracy: true }); | (onPicturesSuccess, onPicturesError, { enableHighAccuracy: true }); | ||
} | } | ||
// | // دالة النجاح للاستجابة لاحداثيات الموقع الجغرافي | ||
var onPicturesSuccess = function (position) { | var onPicturesSuccess = function (position) { | ||
Latitude = position.coords.latitude; | Latitude = position.coords.latitude; | ||
سطر 418: | سطر 416: | ||
getPictures(Latitude, Longitude); | getPictures(Latitude, Longitude); | ||
} | } | ||
// | // الحصول على الصور باستخدام احداثيات المرقع الجغرافي | ||
function getPictures(latitude, longitude) { | function getPictures(latitude, longitude) { | ||
$('#pictures').empty(); | $('#pictures').empty(); | ||
سطر 433: | سطر 431: | ||
); | ); | ||
} | } | ||
// | // دالة النجاح للاستجابة للتغيرات في موقعك الجغرافي | ||
var onPicturesWatchSuccess = function (position) { | var onPicturesWatchSuccess = function (position) { | ||
var updatedLatitude = position.coords.latitude; | var updatedLatitude = position.coords.latitude; | ||
سطر 443: | سطر 441: | ||
} | } | ||
} | } | ||
// | // دالة الخطأ | ||
function onPicturesError(error) { | function onPicturesError(error) { | ||
console.log('code: ' + error.code + '\n' + | console.log('code: ' + error.code + '\n' + | ||
'message: ' + error.message + '\n'); | 'message: ' + error.message + '\n'); | ||
} | } | ||
// | // مراقبة التغيرات في موقعك الجغرافي | ||
function watchPicturePosition() { | function watchPicturePosition() { | ||
return navigator.geolocation.watchPosition | return navigator.geolocation.watchPosition | ||
(onPicturesWatchSuccess, onPicturesError, { enableHighAccuracy: true }); | (onPicturesWatchSuccess, onPicturesError, { enableHighAccuracy: true }); | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
== انظر أيضا == | |||
* [[Cordova/config ref|الملف Config.xml]] | |||
* [[Cordova/plugins|دليل تطوير الإضافات في كوردوفا]] | |||
* صفحة <nowiki/>[[Cordova/events|الأحداث]]. | |||
==مصادر== | ==مصادر== | ||
*[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html صفحة cordova-plugin-geolocation في توثيق كوردوفا الرسمي.] | *[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-geolocation/index.html صفحة cordova-plugin-geolocation في توثيق كوردوفا الرسمي.] |
مراجعة 19:24، 17 ديسمبر 2018
توفر هذه الإضافة معلومات حول الموقع الجغرافي للجهاز، مثل خط العرض وخط الطول.
من الطرق الشائعة لتحديد معلومات الموقع الجغرافي، نجد: نظام تحديد المواقع العالمي (GPS)، واستنتاج الموقع من إشارات الشبكة، مثل عنوان IP، وعناوين تحديد الهوية بموجات الراديو (RFID)، واللاسلكي (WiFi)، وعناوين MAC Bluetooth، ومُعرِّفات الخلية GSM/CDMA.
ليس هناك ما يضمن أنّ الواجهة البرمجية ستعيد الموقع الفعلي للجهاز. لمعرفة كيفية استخدام هذه الإضافة، اطلع على الأمثلة التوضيحية في أسفل هذه الصفحة، أو انتقل مباشرة إلى المرجع.
تأسست الواجهة البرمجية لهذه الإضافة على مواصفات الواجهة البرمجية لتحديد المواقع الجغرافية من W3C ، ولا تُنفّذ إلا على الأجهزة التي لا توفر تقديما (implementation) جاهزًا سلفًا.
تنبيه: جمع واستخدام بيانات تحديد الموقع الجغرافي تثير مخاوف بخصوص قضايا الخصوصية. يجب أن تُوضّح سياسة الخصوصية في تطبيقك كيفية استخدام التطبيق لبيانات تحديد الموقع الجغرافي، وما إن كانت ستُتَشارك مع أي أطراف أخرى، ومستوى دقة البيانات (على سبيل المثال، هل المعلومات ستكون تقريبية، أم دقيقة، أم تستهدف الرمز البريدي، وما إلى ذلك). عموما، تعتبر بيانات تحديد الموقع الجغرافي حساسة، لأنها قد تُستخدم لمعرفة مكان المستخدم، وفي حال تخزينها، فستكشف تاريخ سفرياتهم وتحركاتهم. لذلك، فبالإضافة إلى سياسة خصوصية التطبيق، سيكون من الجيد تقديم إشعار فوري قبل محاولة تطبيقك الوصول إلى بيانات الموقع الجغرافي (إن لم يكن نظام التشغيل يفعل ذلك سلفًا). ينبغي أن يوفر هذا الإشعار نفس المعلومات المذكورة أعلاه، إضافة إلى استئذان المُستخدم (على سبيل المثال، عبر تقديم خيارات من قبيل حسنًا و لا شكرًا). لمزيد من المعلومات، يرجى الاطلاع على دليل الخصوصية.
تعرّف هذه الإضافة كائنًا عامًّا navigator.geolocation
(في المنصات التي لا يكون مُعرّفا فيها).
على الرغم من أن هذا الكائن موجود في النطاق العام (global scope)، إلا أن الميزات التي يوفرها لن تكون متاحة إلا بعد إطلاق الحدث deviceready
.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("navigator.geolocation works well");
}
التثبيت
تتطلب إضافة تحديد الموقع الجغرافي الإصدارَ كوردوفا 5.0 أوما بعده (الإصدار المستقر الحالي 1.0.0)
cordova plugin add cordova-plugin-geolocation
لا يزال بإمكان الإصدارات القديمة من كوردوفا تثبيت هذه الإضافة عبر المُعرِّف المُتجاوز (الإصدار المستقر 0.3.12)
cordova plugin add org.apache.cordova.geolocation
من الممكن أيضًا تثبيت هذه الإضافة عبر عنوان مستودع git مباشرة (إلا أنه غير مستقر)
cordova plugin add https://github.com/apache/cordova-plugin-geolocation.git
المنصات المدعومة
- أندرويد
- iOS
- ويندوز
التوابع
يُعيد هذا التابع الموضع الحالي للجهاز ويمرّره إلى دالة الاستجابة (callback) geolocationSuccess
، مع تمرير الكائن Position
كمعامل. إذا كان هناك خطأ، فسيُمرّر الكائن PositionError
إلى دالة الاستجابة geolocationError
.
navigator.geolocation.getCurrentPosition(geolocationSuccess,
[geolocationError],
[geolocationOptions]);
المعاملات
geolocationSuccess
: دالة الاستجابة (callback) التي سيُمرّر إليها الموقع الحالي.geolocationError
: (اختياري) دالة الاستجابة التي ستُنفذ في حالة حدوث خطأ.geolocationOptions
: (اختياري) خيارات تحديد الموقع الجغرافي.
مثال
// onSuccess دالة الاستجابة للحدث
// والذي يحتوي Position يقبل هذا التابع الكائن
// الحالية GPS إحداثيات
//
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
// PositionError الكائن onError تتلقى دالة الاستجابة للحدث
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
ملاحظات خاصة بمنصة iOS
منذ الإصدار iOS 10، صار من الإلزامي تقديم وصف للاستخدام في الملف info.plist
إن كنت تريد الوصول إلى البيانات الحساسة. عندما يستأذن النظام المستخدم للوصول إلى تلك المعلومات، سيُعرض وصف الاستخدام ذاك كجزء من مربع حوار الاستئذان، ولكن في حال عدم توفير وصف الاستخدام، فسيتعطل التطبيق قبل عرض مربع الحوار. كما سترفض Apple التطبيقات التي تحاول الوصول إلى البيانات الخاصة دون تقديم وصفٍ للاستخدام.
تتطلب هذه الإضافات أوصاف الاستخدام التالية:
NSLocationWhenInUseUsageDescription
: تحدد سبب سعي التطبيق للوصول إلى موقع المستخدم.
لإضافة هذه المُدخلة إلى info.plist
، يمكنك استخدام الوسم edit-config
في الملف config.xml
على النحو التالي:
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby</string>
</edit-config>
ملاحظات خاصة بمنصة أندرويد
إذا تم إيقاف خدمة تحديد الموقع الجغرافي، فستُستدعى دالة الاستجابة onError
بعد المدة الزمنية timeout
(إذا تم تحديدها). وفي حال عدم تحديد المعامل timeout
، فلن يتم استدعاء أي دالة استجابة.
يُعيد هذا التابع الموضع الحالي للجهاز عند رصد أي تغيير في الموضع. عندما يتغير موقع الجهاز، يتم تنفيذ دالة الاستجابة geolocationSuccess
مع تمرير الكائن Position
إليها كمعامل. إن حدث خطأ، تُنفّذ دالة الاستجابة geolocationError
مع تمرير الكائن PositionError
كمعامل.
var watchId = navigator.geolocation.watchPosition(geolocationSuccess,
[geolocationError],
[geolocationOptions]);
المعاملات
geolocationSuccess
: دالة الاستجابة التي سيُمرّر إليها الموقع الحالي.geolocationError
: (اختياري) دالة الاستجابة التي ستُنفذ عند حدوث خطأ.geolocationOptions
: (اختياري) خيارات تحديد الموقع الجغرافي.
القيمة المعادة
تُعاد سلسلة نصية تحتوي على معرفِ المراقبة (watch id)، الذي يحدد مجال مراقبة الموقع (watch position interval). يجب استخدام مٌعرّف المراقبة مع التابع navigator.geolocation.clearWatch
لإيقاف مراقبة تغييرات الموقع الجغرافي.
مثال
// onSuccess دالة الاستجابة للنجاح
//والذي يحتوي على Position يقبل هذا التابع كائنا
// الحالية GPS احداثيات
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// PositionError كائنا onError تتلقى دالة الاستجابة للخطأ
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// خيارات: إن لم يحدث أي تحديث خلال 30 ثانية، فسيُطلق خطأ
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 30000 });
geolocationOptions
معاملات اختيارية تُستخدم لتخصيص عملية تحصيل معلومات الموقع الجغرافي من الكائن Position
.
{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
الخيارات
enableHighAccuracy
: يُستخدم هذا الخيار عندما يحتاج التطبيق إلى الحصول على أدق النتائج الممكنة. بشكل افتراضي، يحاول الجهاز تحصيل معلومات الموقع الجغرافي (Position
) باستخدام أساليب تستند إلى الشبكة. إنّ ضبط هذه الخاصية عند القيمةtrue
يُخطِر إطار العمل بضرورة استخدام أساليب أكثر دقة، مثل تحديد الموقع عبر الأقمار الصناعية. (قيمة منطقية)timeout
: االفترة الزمنية القصوى (بالميليثانية) المسموح بمرورها منذ لحظة استدعاء التابعnavigator.geolocation.getCurrentPosition
أوgeolocation.watchPosition
وحتى تنفيذ دالة الاستجابة المقابلةgeolocationSuccess
. إذا لم يتم استدعاء دالة الاستجابةgeolocationSuccess
خلال هذا الوقت، فسيُمرّر إلى دالة الخطأgeolocationError
كود الخطأPositionError.TIMEOUT
. (لاحظ أنّه عند استخدامها مع التابعgeolocation.watchPosition
، يمكن استدعاء دالة الخطأgeolocationError
بشكل متكررٍ كلtimeout
ميليثانية) (عدد)maximumAge
: يقبل موقعًا مخزّنا مؤقتًا (cached position)، شرط ألا يزيد عمره عن الوقت المحدد بالميليثانية. (عدد)
ملاحظات خاصة بمنصة أندرويد
في حال إيقاف خدمة تحديد الموقع الجغرافي، فستُستدعى دالة الاستجابة onError
بعد الفاصل الزمني timeout
في حال تحديده. أما في حال عدم تحديده، فلن يتم استدعاء أي دالة استجابة.
يوقف هذا التابع عملية مراقبة التغييرات في موقع الجهاز، والمشار إليها من قبل المعامل watchID
.
navigator.geolocation.clearWatch(watchID);
المعاملات
watchID
: مُعرِّف المجالwatchPosition
المُراد حذفه. (سلسلة نصية)
مثال
// خيارات: مراقبة التغيرات في الموقع الجغرافي، مع استخدام أدق وسائل تحديد الموقع
// المُمكنة
//
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true });
// ...في وقت لاحق...
navigator.geolocation.clearWatch(watchID);
الكائنات (للقراءة فقط)
Position
يحتوي الكائن Position
على إحداثيات الموقع الجغرافي وختمه الزمني (timestamp)، يتم انشاؤه من قبل الواجهة البرمجية للإضافة.
خاصيات
coords
: مجموعة من الإحداثيات الجغرافية. (احداثيات)timestamp
: الختم الزمني الذي يحدد توقيت تسجيل الإحداثياتcoords
. (DOMTimeStamp
)
Coordinates
يُربط الكائن Coordinates
بكائنٍ Position
، والذي يتم توفيره لدوال الاستجابة (callback functions) الخاصة بطلبيات (requests) الموقع الحالي. يحتوي هذا الكائن على مجموعة من الخاصيات التي تحدد الإحداثيات الجغرافية لموقعٍ ما.
خاصيات
latitude
: خط العرض بالدرجات العشرية. (عدد)longitude
: خط الطول بالدرجات العشرية. (عدد)altitude
: ارتفاع الموقع بالأمتار فوق الإهليليج (ellipsoid). (عدد)accuracy
: مستوى الدقة لإحداثيات الطول والعرض بالأمتار. (عدد)altitudeAccuracy
: مستوى دقة إحداثيات الإرتفاع بالأمتار. (عدد)heading
: اتجاه السفر، محدد بعدد الدرجات في اتجاه عقارب الساعة نسبةً إلى الشمال الحقيقي. (عدد)speed
: السرعة الأرضية الحالية للجهاز، تُحدد بعدد الأمتار المقطوعة في الثانية. (عدد)
ملاحظات خاصة بمنصة أندرويد
altitudeAccuracy
: غير مدعومة في أجهزة أندرويد، حيث تعيد القيمة null
.
PositionError
يُمرّر الكائن PositionError
إلى دالة الاستجابة geolocationError
عند حدوث خطأ في الكائن navigator.geolocation
.
خاصيات
code
: أحد رموز الخطأ المحددة مسبقًا، والمدرجة أدناه.message
: رسالة خطأ تحتوي تفاصيل الخطأ الذي وقع.
ثوابت
PositionError.PERMISSION_DENIED:
تُعاد هذه الثابتة عندما يرفض المستخدمون السماح للتطبيق بالوصول إلى معلومات الموقع الجغرافي. تتعلق هذه الثابتة بالمنصة المُستخدمة.PositionError.POSITION_UNAVAILABLE
: تُعاد عندما يعجز الجهاز عن الحصول على الموقع الجغرافي. بشكل عام، هذا يعني أنّ الجهاز ليس متصلًا بأي بشبكة، أو لا يمكنه الوصول إلى القمر الصناعي.PositionError.TIMEOUT
: تُعاد عندما يتعذر على الجهاز الحصول على الموقع الجغرافي خلال الوقت المحدد بواسطةtimeout
المتضمَّن في الخياراتgeolocationOptions
. عند استخدامها مع التابعnavigator.geolocation.watchPosition
، يمكن تمرير هذا الخطأ مراراً وتكراراً إلى دالة الاستجابةgeolocationError
كلtimeout
ميليثانية.
مثال توضيحي
يمكن استخدام هذه الإضافة لمساعدة المستخدمين على العثور على المواقع أو الأحداث القريبة منهم، مثل عروض Groupon، والمنازل المعروضة للبيع، والأفلام المعروضة حاليًا، والأحداث الرياضية والترفيهية وغير ذلك.
تحتوي هذه الفقرة على مجموعة من الأفكار كبداية لاستغلال هذه الإضافة. في الشيفرات البرمجية أدناه، ستتعلم بعض الطرق السهلة لإضافة هذه الميزات إلى تطبيقك.
- الحصول على إحداثيات موقعك
- الحصول على توقعات الطقس
- تلقي تحديثات توقعات الطقس أثناء القيادة
- التعرف على موقعك على الخريطة
- البحث عن متجر قريب
- مطالعة صور عن المنطقة المحيطة بك
الحصول على إحداثيات موقعك الجغرافي
function getWeatherLocation() {
navigator.geolocation.getCurrentPosition
(onWeatherSuccess, onWeatherError, { enableHighAccuracy: true });
}
الحصول على توقعات الطقس
// دالة النجاح التي ستُمرر إليها الإحداثيات الجغرافية
var onWeatherSuccess = function (position) {
Latitude = position.coords.latitude;
Longitude = position.coords.longitude;
getWeather(Latitude, Longitude);
}
// الحصول على معلومات الطقس انطلاقا من معلومات الموقع الجغرافي
function getWeather(latitude, longitude) {
// http://openweathermap.org/ الحصول على مفتاح من الموقع
// بالمفتاح الذي حصلت عليه "Your_Key_Here" استبدل السلسلة النصية
var OpenWeatherAppKey = "Your_Key_Here";
var queryString =
'http://api.openweathermap.org/data/2.5/weather?lat='
+ latitude + '&lon=' + longitude + '&appid=' + OpenWeatherAppKey + '&units=imperial';
$.getJSON(queryString, function (results) {
if (results.weather.length) {
$.getJSON(queryString, function (results) {
if (results.weather.length) {
$('#description').text(results.name);
$('#temp').text(results.main.temp);
$('#wind').text(results.wind.speed);
$('#humidity').text(results.main.humidity);
$('#visibility').text(results.weather[0].main);
var sunriseDate = new Date(results.sys.sunrise);
$('#sunrise').text(sunriseDate.toLocaleTimeString());
var sunsetDate = new Date(results.sys.sunrise);
$('#sunset').text(sunsetDate.toLocaleTimeString());
}
});
}
}).fail(function () {
console.log("error getting location");
});
}
// دالة الاستجابة للخطأ
function onWeatherError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
تلقي تحديثات توقعات الطقس أثناء القيادة
// مراقبة التغيرات في الموقع
function watchWeatherPosition() {
return navigator.geolocation.watchPosition
(onWeatherWatchSuccess, onWeatherError, { enableHighAccuracy: true });
}
// دالة الاستجابة للنجاح الخاصة بمراقبة تغيرات موقعك
var onWeatherWatchSuccess = function (position) {
var updatedLatitude = position.coords.latitude;
var updatedLongitude = position.coords.longitude;
if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
Latitude = updatedLatitude;
Longitude = updatedLongitude;
// Calls function we defined earlier.
getWeather(updatedLatitude, updatedLongitude);
}
}
التعرف على موقعك على الخريطة
يُوفر كلٌ من الموقعين Bing و Google خدمات الخرائط. سنستخدم في هذا المثال Google. ستحتاج إلى مفتاح، والذي يمكنك الحصول عليه مجانًا إن كنت تحاول تجربة الخدمة.
قم بإضافة مرجع إلى الخدمة maps
.
<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key"></script>
ثم أضف الشيفرة التالية لاستخدام الخدمة.
var Latitude = undefined;
var Longitude = undefined;
// الحصول على الإحداثيات الجغرافية
function getMapLocation() {
navigator.geolocation.getCurrentPosition
(onMapSuccess, onMapError, { enableHighAccuracy: true });
}
// دالة النجاح التي تستجيب لإحداثيات الموقع الجغرافي
var onMapSuccess = function (position) {
Latitude = position.coords.latitude;
Longitude = position.coords.longitude;
getMap(Latitude, Longitude);
}
// الحصول على الخريطة انطلاقا من الموقع الجغرافي
function getMap(latitude, longitude) {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map
(document.getElementById("map"), mapOptions);
var latLong = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: latLong
});
marker.setMap(map);
map.setZoom(15);
map.setCenter(marker.getPosition());
}
// دالة النجاح التي تستجيب للتغيرات في الموقع الجغرافي
var onMapWatchSuccess = function (position) {
var updatedLatitude = position.coords.latitude;
var updatedLongitude = position.coords.longitude;
if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
Latitude = updatedLatitude;
Longitude = updatedLongitude;
getMap(updatedLatitude, updatedLongitude);
}
}
// دالة الاستجابة للخطأ
function onMapError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// مراقبة التغيرات في موقعك الجغرافي
function watchMapPosition() {
return navigator.geolocation.watchPosition
(onMapWatchSuccess, onMapError, { enableHighAccuracy: true });
}
البحث عن متجر قريب
يمكنك استخدام نفس مفتاح جوجل في هذا المثال.
أضف مرجعًا إلى الخدمة places
.
<script src=
"https://maps.googleapis.com/maps/api/js?key=Your_API_Key&libraries=places">
</script>
ثم أضف الشيفرة التالية لاستخدام هذه الخدمة.
var Map;
var Infowindow;
var Latitude = undefined;
var Longitude = undefined;
// الحصول على الإحداثيات الجغرافية
function getPlacesLocation() {
navigator.geolocation.getCurrentPosition
(onPlacesSuccess, onPlacesError, { enableHighAccuracy: true });
}
// دالة النجاح للاستجابة لإحداثيات الموقع الجغرافي
var onPlacesSuccess = function (position) {
Latitude = position.coords.latitude;
Longitude = position.coords.longitude;
getPlaces(Latitude, Longitude);
}
// التعرف على الأمكنة انطلاقا من احداثيات الموقع الجغرافي
function getPlaces(latitude, longitude) {
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Map = new google.maps.Map(document.getElementById("places"), mapOptions);
Infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(Map);
service.nearbySearch({
location: latLong,
radius: 500,
type: ['store']
}, foundStoresCallback);
}
// دالة النجاح للاستجابة للتغيرات في الموقع الجغرافي
var onPlacesWatchSuccess = function (position) {
var updatedLatitude = position.coords.latitude;
var updatedLongitude = position.coords.longitude;
if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
Latitude = updatedLatitude;
Longitude = updatedLongitude;
getPlaces(updatedLatitude, updatedLongitude);
}
}
// دالة النجاح للاستجابة للعثور على متجر قريب
function foundStoresCallback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
// لكل متجر عثرت عليه في الخريطة pin وضع علامة
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: Map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function () {
Infowindow.setContent(place.name);
Infowindow.open(Map, this);
});
}
// دالة الخطأ
function onPlacesError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// مراقبة التغير في موقعك الجغرافي
function watchPlacesPosition() {
return navigator.geolocation.watchPosition
(onPlacesWatchSuccess, onPlacesError, { enableHighAccuracy: true });
}
مطالعة صور عن المنطقة المحيطة بك
يمكن أن تُرفق الصور الرقمية مع الإحداثيات الجغرافية للمكان الذي التُقطت فيه.
استخدم الواجهة البرمجية لموقع Flickr للعثور على الصور التي التُقِطت بالقرب من مكان تواجدك. ومثل خدمات جوجل، ستحتاج إلى مفتاح، ولكنه مجاني إن كنت ترغب في التجربة وحسب.
var Latitude = undefined;
var Longitude = undefined;
// الحصول على الاحداثيات الجغرافية
function getPicturesLocation() {
navigator.geolocation.getCurrentPosition
(onPicturesSuccess, onPicturesError, { enableHighAccuracy: true });
}
// دالة النجاح للاستجابة لاحداثيات الموقع الجغرافي
var onPicturesSuccess = function (position) {
Latitude = position.coords.latitude;
Longitude = position.coords.longitude;
getPictures(Latitude, Longitude);
}
// الحصول على الصور باستخدام احداثيات المرقع الجغرافي
function getPictures(latitude, longitude) {
$('#pictures').empty();
var queryString =
"https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=Your_API_Key&lat="
+ latitude + "&lon=" + longitude + "&format=json&jsoncallback=?";
$.getJSON(queryString, function (results) {
$.each(results.photos.photo, function (index, item) {
var photoURL = "http://farm" + item.farm + ".static.flickr.com/" +
item.server + "/" + item.id + "_" + item.secret + "_m.jpg";
$('#pictures').append($("<img />").attr("src", photoURL));
});
}
);
}
// دالة النجاح للاستجابة للتغيرات في موقعك الجغرافي
var onPicturesWatchSuccess = function (position) {
var updatedLatitude = position.coords.latitude;
var updatedLongitude = position.coords.longitude;
if (updatedLatitude != Latitude && updatedLongitude != Longitude) {
Latitude = updatedLatitude;
Longitude = updatedLongitude;
getPictures(updatedLatitude, updatedLongitude);
}
}
// دالة الخطأ
function onPicturesError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// مراقبة التغيرات في موقعك الجغرافي
function watchPicturePosition() {
return navigator.geolocation.watchPosition
(onPicturesWatchSuccess, onPicturesError, { enableHighAccuracy: true });
}
انظر أيضا
- صفحة الأحداث.