۱۹
فروردین

جلسه ۱۸ : آموزش کار با پلاگین Geolocation در کوردوا

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه قبل پلاگین File Transfer و کاربرد های آن آشنا شدیم؛ در این جلسه آموزش کار با پلاگین Geolocation در کوردوا را ارائه می دهیم.

آموزش کار با پلاگین Geolocation در کوردوا

ضرورت آموزش کار با پلاگین Geolocation در کوردوا به دلیل اطلاعاتی است که این پلاگین در خصوص طول و عرض جغرافیای دستگاه (device) فراهم می آورد.
در این آموزش به صورت مرحله به مرحله و گام به گام نحوه نصب و استفاده از این پلاگین را آموزش خواهیم داد.

مرحله ۱ – نصب پلاگین

برای نصب این پلاگین باید دستور زیر را در پنجره command prompt اجرا کنید.

مثال :

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

1	C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

مرحله ۲ – اضافه کردن دکمه ها

در این جلسه نشان می دهیم که چطور به درستی موقعیت فعلی خود را بیابید و هر گونه تغییر در آن را بررسی کنید.
در اولین اقدام دو دکمه خواهیم ساخت و از آن ها برای نامگذاری توابع استفاده خواهیم نمود.

مثال :

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

1 2	<button id = "getPosition">CURRENT POSITION</button> <button id = "watchPosition">WATCH POSITION</button>

مرحله ۳ – اضافه کردن Event Listener

وقتی دستگاه آماده بود در آن صورت اقدام به ساخت event listeners ها می کنیم.
به تابع onDeviceReady در index.js، کد نمونه زیر را اضافه می نماییم.

مثال :

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);

1 2	document.getElementById("getPosition").addEventListener("click", getPosition); document.getElementById("watchPosition").addEventListener("click", watchPosition);

مرحله ۴ – ساخت توابع

برای دو event listeners خود دو تابع خواهیم ساخت.
از اولین تابع برای به دست آوردن موقعیت فعلی و از دومی نیز برای بررسی آن استفاده می کنیم.

مثال :

function getPosition() {
   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(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');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {
   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }
   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(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');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }
}

function getPosition() {

var options = {

enableHighAccuracy: true,

maximumAge: 3600000

}

var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

function onSuccess(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');

};

function onError(error) {

alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');

}

function watchPosition() {

var options = {

maximumAge: 3600000,

timeout: 3000,

enableHighAccuracy: true,

}

var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

function onSuccess(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');

};

function onError(error) {

alert('code: ' + error.code + '\n' +'message: ' + error.message + '\n');

}

در مثال بالا از دو روش getCurrentPosition و watchPosition استفاده شده است.
هر دو این توابع از سه پارامتر استفاده می کنند.
هنگامی بر روی دکمه CURRENT POSITION کلیک کنیم، پیغام هشدار مقدار geolocation را نشان خواهد داد.

آموزش کار با پلاگین Geolocation در کوردوا

cordova geolocation get

در صورت فشردن دکمهWATCH POSITION، پیغام هشدار مشابهی در هر سه ثانیه ظاهر خواهد شد.
به این ترتیب می توان تغییرات حرکتی دستگاه کاربر را ردیابی کرد.

نکته

این پلاگین از جی پی اس استفاده می کند بنابرین ممکن است گاهی اوقات مقادیر را بازگشت ندهد و درخواست ” خطای زمان انتظار ” را دوباره نشان می دهد.
به همین دلیل:
enableHighAccuracy را به صورت enableHighAccuracy: true
maximumAge را به صورت maximumAge: 3600000
تنظیم می کنیم. این کار سبب می شود که اگر درخواست (request) در هنگام ارسال تکمیل نباشد از همان مقداری که برای آن تعریف کرده ایم؛ استفاده نماید.
در مثال ما حداکثر مقدارتنظیم شده ۳۶۰۰۰۰۰ میلی ثانیه است.

کلام آخر

در این جلسه پلاگین Geolocation را به شما معرفی کردیم و نحوه نصب و کار با آن را آموختیم.
در جلسه بعد آموزش کار با پلاگین Globalization را ارائه می کنیم.
با پی وی لرن همراه باشید.

QR: جلسه ۱۸ : آموزش کار با پلاگین Geolocation در کوردوا

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۸ : آموزش کار با پلاگین Geolocation در کوردوا

مقدمه

آموزش کار با پلاگین Geolocation در کوردوا

مرحله ۱ – نصب پلاگین

مرحله ۲ – اضافه کردن دکمه ها

مرحله ۳ – اضافه کردن Event Listener

مرحله ۴ – ساخت توابع

نکته

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ