ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 14 HTML5 Geolocation ตอนที่ 2

3.ตัวอย่าง การแสดงตำแหน่งด้วยแผนที่

<html>
<body>
<p id="demo">Click the button to get your position:</p>
<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+"'>";  }

</script>
</body>
</html>

ผลลัพธ์คือ

   นอกจากนี้แล้วเรายังสามารถเพิ่มคุณสมบัติอื่นให้กับแผนที่ได้อีกด้วย เช่น จุดมารก์ในแผนที่ การซูมเข้า-ออก และการลากเพื่อดูแผนที่ใกล้เคียง เป็นต้น
ตัวอย่าง

<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<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)
  {  lat=position.coords.latitude;
  lon=position.coords.longitude;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';   mapholder.style.width='500px';

  var myOptions={  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}  };
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});  }

</script>
</body>
</html>

ผลลัพธ์คือ


อ่านเพิ่มเติม
บทที่ 14 HTML5 Geolocation คือเทคโนโลยีที่ช่วยหาพิกัด ตอนที่ 1

ข้อมูลอ้างอิง
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
PHPbb บน windows 2003 installไม่ผ่าน
โดย koishi ศ 28 มี.ค. 2008 9:40 pm บอร์ด Programming - PHP
1
878
ศ 28 มี.ค. 2008 10:12 pm โดย mindphp
รบกวนดูcodeส่งmailให้ทีค่ะ
โดย click5 ศ 28 มี.ค. 2008 6:30 pm บอร์ด Programming - PHP
1
947
ศ 28 มี.ค. 2008 7:34 pm โดย mindphp
การลบโฟลเดอร์ครับ
โดย boyict ศ 28 มี.ค. 2008 6:59 am บอร์ด Programming - PHP
6
1478
จ 31 มี.ค. 2008 6:48 pm โดย mindphp
การเขียน standard input
โดย pornchaispencer ศ 28 มี.ค. 2008 6:06 am บอร์ด Programming - PHP
1
968
ศ 28 มี.ค. 2008 7:26 pm โดย mindphp
การเขียน autoresponder
โดย pornchaispencer ศ 28 มี.ค. 2008 5:19 am บอร์ด Programming - PHP
0
816
ศ 28 มี.ค. 2008 5:19 am โดย pornchaispencer
สอบถามการกระทำกับ string ครับ
โดย Yothin67 ศ 28 มี.ค. 2008 1:07 am บอร์ด Programming - PHP
1
743
ศ 28 มี.ค. 2008 7:31 pm โดย mindphp
เพิ่งเริ่มต้นเขียน PHP อยากทำเว็บ Bit ต้องทำอะไรบ้างครับ
โดย unzizu พฤ 27 มี.ค. 2008 8:51 pm บอร์ด Programming - PHP
3
1872
จ 07 เม.ย. 2008 4:00 pm โดย mindphp
เกี่ยวกับส่งค่าในการแบ่งเพจ
โดย eakcub พฤ 27 มี.ค. 2008 7:37 pm บอร์ด Programming - PHP
1
883
พฤ 27 มี.ค. 2008 9:25 pm โดย mindphp
กำลังทำ Website โดยมี content management system (CMS) ด้วย
โดย mekhong พฤ 27 มี.ค. 2008 4:53 pm บอร์ด Programming - PHP
3
1405
อ 01 เม.ย. 2008 7:39 pm โดย mindphp
ฝึกทำ webboard ใช้ php เขียน
โดย m0onoi พฤ 27 มี.ค. 2008 9:43 am บอร์ด Programming - PHP
3
1223
ศ 28 มี.ค. 2008 7:32 pm โดย mindphp
การดึงปีปัจจุบันมาคิวรี่คะ
โดย k640 พฤ 27 มี.ค. 2008 6:48 am บอร์ด SQL - Database
1
1456
พฤ 27 มี.ค. 2008 7:25 am โดย mindphp
ช่วยสอนวิธีสร้างฐานข้อมูลphpbbทีครับ
โดย HappyRanOnline พฤ 27 มี.ค. 2008 12:24 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
1151
พฤ 27 มี.ค. 2008 12:24 am โดย HappyRanOnline
ถามเรื่อง File Input หน่อยครับ
โดย armyarmy พ 26 มี.ค. 2008 11:32 pm บอร์ด HTML CSS
0
2160
พ 26 มี.ค. 2008 11:32 pm โดย armyarmy
การย้าย db ไปที่ host
โดย hyde4fun พ 26 มี.ค. 2008 5:09 pm บอร์ด SQL - Database
1
1536
อ 27 เม.ย. 2008 10:51 pm โดย batman
http://www.website.dot/?page=pages - ทำแบบนี้ยังไงหรอครับ
โดย muboss พ 26 มี.ค. 2008 4:50 pm บอร์ด Programming - PHP
2
1054
พฤ 27 มี.ค. 2008 5:37 am โดย muboss
สอบถามการเปลี่ยน pass phpmyadmin
โดย hyde4fun พ 26 มี.ค. 2008 8:22 am บอร์ด SQL - Database
2
1742
พ 26 มี.ค. 2008 5:03 pm โดย hyde4fun
ต้องการพิมพ์หน้าเว็บ เฉพาะ mainframe (พิมพ์ออกเครื่องพิมพ์)
โดย Didring พ 26 มี.ค. 2008 8:15 am บอร์ด HTML CSS
0
2180
พ 26 มี.ค. 2008 8:15 am โดย Didring
ส่งผ่านค่าตัวแปรไปอีกหน้าหนึ่ง โดยไม่ต้อง submit
โดย Didring พ 26 มี.ค. 2008 8:02 am บอร์ด Programming - PHP
2
1672
พ 26 มี.ค. 2008 6:50 pm โดย dragon_html
ติดตั้ง phpbb2เสร็จแล้ว มันขึ้นแบบนี้เวลาสมัครสมาชิกอะคับ
โดย teeminator พ 26 มี.ค. 2008 12:22 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
1086
พ 26 มี.ค. 2008 4:47 am โดย mindphp
ผิดพลาด SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO" แก้
โดย song_woot อ 25 มี.ค. 2008 8:11 pm บอร์ด SQL - Database
6
2662
อ 25 มี.ค. 2008 11:52 pm โดย mindphp