TONNARK: HTML5 Geolocation

HTML5 เป็นมาตรฐานใหม่ในการพัฒนาเว็บไซต์ โดยมีการเพิ่มคุณสมบัติใหม่ๆเข้าไปทำให้สามารถพัฒนาเว็บไซต์ให้มีลูกเล่นและมีประสิทธิภาพมากขึ้น จากที่ระบุไว้ใน http://www.w3schools.com เกี่ยวกับคุณสมบัติที่มีใน HTML5 คือ

HTML5

New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications

Browser ที่รองรับ Internet Explorer 9+, Firefox, Chrome, Safari and Opera

ตอนนี้จะเป็นตัวอย่างของการนำคุณสมบัติเกี่ยวกับ Geolocation หรือการหาพิกัด GPS. ของผู้ใช้งาน เช่นตัวอย่างจาก http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_error เป็นตัวอย่างที่ค่อนข้างจะสมบูรณ์และสามารถนำไปประยุกต์ใช้ในด้านต่างๆได้เป็นอย่างดี

<!DOCTYPE html>

<html>

<body>

<p id="demo">Click the button to get your coordinates:</p>

<button onclick="getLocation()">Try It</button>

<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)

{

  x.innerHTML="Latitude: " + position.coords.latitude + 

  "<br>Longitude: " + position.coords.longitude;  

}

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>

</body>

</html>

และถ้าต้องการแสดงพิกัดของผู้ใช้งานเป็นแผนที่โดยใช้ googlemap ก็สามารถทำได้โดยการแก้ไขฟังค์ชั่น showPosition เป็นดังนี้

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+"'>";

}

ทดสอบการทำงานของตัวอย่างได้ที่ http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map

TONNARK

Tuesday, August 13, 2013

HTML5 Geolocation

HTML5

No comments:

Post a Comment