10
تشکر

معرفی API مکان یابی در HTML5

اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

تا به حال در آپارنت APIهای مختلفی از تکنولوژی HTML5 را معرفی و تست کردیم. در این مطلب میخواهیم GeoLocation API را بررسی کنیم. توسط این API میتوانیم محل نسبتاً دقیق کاربر در محیط واقعی را بدست بیاوریم.

برای مثال مرورگر فایرفاکس به این صورت عمل میکند: اگر برنامه‌ای بخواهد از این ویژگی استفاده کند، ابتدا از کاربر اجازه میگیرد، در صورت موافقت کاربر، فایرفاکس اطلاعات wireless access points نزدیک و IP کاربر را به سرویس ارائه دهنده geolocation، که گوگل است میفرستد و این سرویس با استفاده از این اطلاعات محل کاربر را مشخص میکند و به صورت مختصات آن را برمیگرداند.

در ادامه مطلب همراه ما باشید

پشتیبانی مرورگرها

برای بررسی اینکه آیا مرورگر کاربر از این ویژگی پشتیبانی میکند یا خیر باید geolocation را در شی navigator جستجو کنیم. مانند کد زیر:

navigator.geolocation = navigator.geolocation || navigator.webkitGeolocation || navigator.mozGeolocation;
if(!navigator.geolocation) {
  alert('مرورگر شما پشتیبانی نمیکند.');
}

پیدا کردن محل کاربر

با استفاده از متد getCurrentPosition میتوان محل فعلی کاربر را بدست آورد. برای مثال در کد زیر ما محل فعلی کاربر را بدست می آوریم. که مختصات فعلی کاربر درون position.coords.latitude و position.coords.longitude قرار دارد.

navigator.geolocation = navigator.geolocation || navigator.webkitGeolocation || navigator.mozGeolocation;
navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

متد getCurrentPosition میتواند دارای تنظیمات و همچنین دستگیره (handle) خطا باشد.

در قسمت تنظیمات ،enableHighAccuracy اگر true باشد، سرویس تمام سعی خود را میکند تا دقیقترین مکان را بدست بیاورد که اینکار ممکن است کمی زمان برگشت اطلاعات را کند کند. مقدار پیشفرض false است.

Timeout بیشترین زمان منتظر شدن برای گرفتن اطلاعات را مشخص میکند. اگر زمان دریافت اطلاعات از مقدار مشخص شده بیشتر شود به error handle میرود.

توسط maximumAge میتوان مقدار زمانی را که مکان بدست آمده کاربر میتواند Cache شود را مشخص کرد. برای مثال اگر این زمان را 10 دقیقه در نظر بگیرید، و در هر 10 دقیقه شما دو بار محل کاربر را چک کنید، در مربته دوم از همان مکان قبلی استفاده میکند و دیگر دوباره درخواست نمیدهد.

navigator.geolocation = navigator.geolocation || navigator.webkitGeolocation || navigator.mozGeolocation;

var optn = {
  enableHighAccuracy : true,
  timeout : Infinity,
  maximumAge : 0
}

navigator.geolocation.getCurrentPosition(showPosition, showError, optn);

function showPosition(position) {
  element.innerHTML = position.coords.latitude;
  element.innerHTML = position.coords.longitude;
}
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert(error.message);
      break;
    case error.POSITION_UNAVAILABLE:
      alert(error.message);
      break;
    case error.TIMEOUT:
      alert(error.message);
      break;
    case error.UNKNOWN_ERROR:
      alert(error.message);
      break;
  }
}

همانطور که در کد بالا میبنید، تابع showError همان error handle است. که در کل ما 4 نوع خطا در GeoLocation داریم.

Watching Position

خب اگر بخواهیم محل کاربر را هر زمان که تغییر پیدا کرد نیز پیدا کنیم باید از متد watchPosition استفاده کنیم. پارامترهای این متد کاملاً مشابه getCurrentPosition است.

watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);

متد watchPosition یک ID برمیگرداند که برای اینکه دیگر متد watchPosition عمل نکند از آن استفاده میکنیم.

navigator.geolocation.clearWatch(watchId);

نتیجه‌ گیری

در مطلبی در گذشته آموزش ابتدایی استفاده از Google map داده شد. با ترکیب این دو میتوانید به راحتی محل کاربر را در نقشه نمایش دهید. حتی تغییرات آن را.


نظرات این مطلب بسته است.