ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อัพโหลดรูปขึ้นเว็บแล้วรูปไม่ออก
โดย noona อ 11 พฤษภาคม 2008 9:22 pm บอร์ด HTML CSS
2
2827
อ 13 พฤษภาคม 2008 10:33 pm โดย noona
error ในการใช้ function.getimagesize
โดย repee789 อ 11 พฤษภาคม 2008 6:58 pm บอร์ด Programming - PHP
2
1665
อ 16 มี.ค. 2010 2:47 pm โดย บุคคลทั่วไป
Joomla 1.5 ทำไมไม่เห็นมีการกำหนด position เลยครับ
โดย iyub16 อ 11 พฤษภาคม 2008 6:32 pm บอร์ด Programming - PHP
8
2071
จ 12 พฤษภาคม 2008 3:17 am โดย iyub16
เอา Flash Video ขึ้นเว็บครับ
โดย boyict อ 11 พฤษภาคม 2008 11:55 am บอร์ด HTML CSS
5
3480
จ 12 พฤษภาคม 2008 6:30 pm โดย mindphp
สร้างไฟล์ xml ขึ้นมาไหมครับ ทำอย่างไรครับ
โดย conan อ 11 พฤษภาคม 2008 12:17 am บอร์ด Programming - PHP
1
1545
อ 11 พฤษภาคม 2008 5:32 am โดย mindphp
โปรดชี้แนะด้วยครับ เรื่อง thumbnails อ่ะครับ
โดย me40 ส 10 พฤษภาคม 2008 1:31 pm บอร์ด Programming - PHP
3
1226
ส 10 พฤษภาคม 2008 1:34 pm โดย me40
ช่วยทีครับ ผมใช้ ob_start(); แล้วไม่สามารถแก้ warning ได้
โดย thehawk ส 10 พฤษภาคม 2008 7:58 am บอร์ด Programming - PHP
1
1421
ส 10 พฤษภาคม 2008 9:20 am โดย mindphp
อยากถามเรื่อง Script Php ส่งเมล์ไม่ให้เข้า junk mail ครับ
โดย neo001 ศ 09 พฤษภาคม 2008 7:26 am บอร์ด Programming - PHP
1
1438
ศ 09 พฤษภาคม 2008 6:59 pm โดย mindphp
เล่นไฟล์เสียง ทำยังไงค่ะ??
โดย น่ารัก พฤ 08 พฤษภาคม 2008 7:57 pm บอร์ด Programming - PHP
4
2448
อ 26 ก.พ. 2012 2:25 am โดย บุคคลทั่วไป
งงมากคับลง appserve แล้วเข้า 127.0.0.1 ไม่ได้คับ
โดย peter3528 พฤ 08 พฤษภาคม 2008 5:34 pm บอร์ด Programming - PHP
3
1543
พ 21 พฤษภาคม 2008 3:16 am โดย peter3528
มีข้อสงสัยช่วยตอบหน่อยครับ
โดย linas พฤ 08 พฤษภาคม 2008 6:57 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
1593
พฤ 08 พฤษภาคม 2008 6:57 am โดย linas
รบกวนขอโค้ดแจ้งตอบกลับเวลามีข้อความ
โดย levelone พฤ 08 พฤษภาคม 2008 2:31 am บอร์ด Programming - PHP
1
1137
พฤ 08 พฤษภาคม 2008 5:44 pm โดย oxygenyoyo
ปรึกษา ส่งอีเมลล์พร้อมแนบไฟล์ไม่ได้ค่ะ
โดย levelone พฤ 08 พฤษภาคม 2008 2:25 am บอร์ด Programming - PHP
0
1201
พฤ 08 พฤษภาคม 2008 2:25 am โดย levelone
วันนี้ผมมีข้อสงสัยเกี่ยวกับวันเวลาครับ
โดย oxygenyoyo พฤ 08 พฤษภาคม 2008 1:09 am บอร์ด Programming - PHP
2
1035
พฤ 08 พฤษภาคม 2008 5:10 pm โดย oxygenyoyo
PostgreSQL,Oracle มีคำสั่ง MySQL->SHOW COLUMNS FROM table
โดย knopsod พ 07 พฤษภาคม 2008 10:07 pm บอร์ด SQL - Database
2
3035
พฤ 08 พฤษภาคม 2008 3:49 pm โดย knopsod
ใครรู้ช่วยผมด้วยคับ
โดย ibecare พ 07 พฤษภาคม 2008 4:13 am บอร์ด Programming - PHP
2
1247
อ 17 มิ.ย. 2008 11:52 pm โดย etee
พี่ Admin ครับผมถามเรื่อง เอาสัตว์เลี้ยงเพิ่มเข้ามา ....
โดย senji00011 พ 07 พฤษภาคม 2008 12:41 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
9
2109
ศ 09 พฤษภาคม 2008 7:05 pm โดย mindphp
จะเอา variable ของ php ใส่ ใน innerHTML อย่างไรครับ
โดย yozap อ 06 พฤษภาคม 2008 9:27 pm บอร์ด Programming - PHP
1
922
พ 07 พฤษภาคม 2008 1:27 am โดย mindphp
ช่วยหน่อยค่ะ เกี่ยวกับการใช้งานปุ่ม radio button
โดย น่ารัก อ 06 พฤษภาคม 2008 8:52 pm บอร์ด Programming - PHP
3
1293
พ 07 พฤษภาคม 2008 4:15 pm โดย mindphp
การตรวจสอบไฟล์
โดย Nicky อ 06 พฤษภาคม 2008 8:21 pm บอร์ด Programming - PHP
1
706
พ 07 พฤษภาคม 2008 1:24 am โดย mindphp