رفتن به مطلب

چگونه میتوانیم از قابلیت جدید Geolocation در HTML5 استفاده نماییم


atlasweb

پست های پیشنهاد شده

قابلیت جدیدی که در HTML5 برای ردیابی کاربران اضافه شده است و میتوانیم آن را در مرورگر کاربران اجرا نماییم Geolocation میباشد. میتوانیم مختصات کاربران را متوجه شویم.

 

این قابلیت نه فقط در کامپیوترهای دسکتاپ بلکه به خوبی بر روی موبایل و تبلت هم میتواند کار نماید. این میتواند موقعیت بسیار خوبی برای برنامه نویسانی باشد که میخواهند از موقعیت کاربر بر روی نرم افزارهایشان استفاده نمایند.

 

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

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مثال :

 

 

<button onclick="getLocation()">Try It</button><div id="mapholder"></div><script>var x = document.getElementById("demo");function getLocation() {   if (navigator.geolocation) {       navigator.geolocation.getCurrentPosition(showPosition, showError);   } else {       x.innerHTML = "Geolocation is not supported by this browser.";   }}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+"'>";}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;   }}</script>

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...