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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากทราบว่าจะโชว์ไฟล์ WMV หรือ FLV ในบอร์ด PhpBB ยังไงครับ
โดย Anonymous พฤ 15 พ.ย. 2007 11:15 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
1898
ศ 16 พ.ย. 2007 12:27 am โดย บุคคลทั่วไป
มันเป็นภาษารัย ช่วยถอดรหัสหน่อย
โดย anuwat555 พฤ 15 พ.ย. 2007 4:28 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
2615
พฤ 15 พ.ย. 2007 4:28 am โดย anuwat555
คือผมดีผมจะ upload ไฟล์ zip อะครับ
โดย thaikol พฤ 15 พ.ย. 2007 12:12 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
2938
พฤ 15 พ.ย. 2007 2:32 am โดย mindphp
ต้องการเปลี่ยน text box ในหน้า login ให้เป็น combo box
โดย kk123 พ 14 พ.ย. 2007 7:34 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
1850
พ 14 พ.ย. 2007 8:43 pm โดย mindphp
ขอความช่วยเลือด่วนการออก Reportที่ดึงจาฐานข้อมูล
โดย aucom-sci พ 14 พ.ย. 2007 6:35 pm บอร์ด Programming - PHP
5
1551
พ 21 พ.ย. 2007 2:00 am โดย mindphp
อยากได้โค้ดที่เวลาสมัครสมาชิกแล้วจะส่งข้อความมาทาง email
โดย beebee1 พ 14 พ.ย. 2007 5:58 pm บอร์ด Programming - PHP
1
1690
พ 14 พ.ย. 2007 6:05 pm โดย mindphp
เช็คข้อมูล 3 ฟิลด์จากMySQL
โดย twin พ 14 พ.ย. 2007 5:06 pm บอร์ด SQL - Database
1
1990
พ 14 พ.ย. 2007 5:58 pm โดย mindphp
โซลูชั่นคอนเนอร์ชู PHP เหนือ JAVA
โดย mindphp พ 14 พ.ย. 2007 10:15 am บอร์ด PHP News
0
2819
พ 14 พ.ย. 2007 10:15 am โดย mindphp
อยากรู้วิธีอ่านข้อมูลจาก excel ด้วย php
โดย nongball อ 13 พ.ย. 2007 10:28 pm บอร์ด Programming - PHP
5
2967
พ 14 พ.ย. 2007 12:18 am โดย mindphp
styles ของ phpBB
โดย repee789 อ 13 พ.ย. 2007 8:29 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
1253
อ 13 พ.ย. 2007 8:54 pm โดย mindphp
อยากได้ โค้ด ฟอร์มส่งเมล์ แล้วแทรกรูปเข้าไปในเนื้อหาเมล์ในเม
โดย earnlimited อ 13 พ.ย. 2007 7:25 pm บอร์ด Programming - PHP
1
1628
อ 13 พ.ย. 2007 7:39 pm โดย mindphp
อยากทราบว่าจะเอาคลิปวีดีโอจากเวบอื่น มาโพสลง php ได้ไหมคับ
โดย Anonymous อ 13 พ.ย. 2007 3:14 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
5
1989
พ 14 พ.ย. 2007 8:42 pm โดย บุคคลทั่วไป
การให้คะแนนกระทู้
โดย Anonymous อ 13 พ.ย. 2007 6:29 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
3
1632
อ 13 พ.ย. 2007 7:38 pm โดย mindphp
อยากเปลี่ยนตำแหน่งของ tag link หรือเพิ่มเข้าไปตรงหัวบอร์ด
โดย Anonymous อ 13 พ.ย. 2007 6:25 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
5
2045
พฤ 15 พ.ย. 2007 7:09 am โดย mindphp
เวลา log in , log out, Admin panel หาย
โดย tts อ 13 พ.ย. 2007 5:23 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
1646
อ 13 พ.ย. 2007 6:03 pm โดย mindphp
เปรียบเทียบฐานข้อมูล MS SQL, PostgreSQL, Oracle, DB2,MySql
โดย mindphp จ 12 พ.ย. 2007 11:16 pm บอร์ด SQL - Database
7
8518
พ 21 ธ.ค. 2016 7:43 pm โดย บุคคลทั่วไป
การเช็คข้อมูล3 ฟิลด์แล้วแสดงลิงค์เนื้อห Record ที่พบและ..
โดย twin จ 12 พ.ย. 2007 10:50 pm บอร์ด Programming - PHP
3
1458
อ 13 พ.ย. 2007 6:07 pm โดย mindphp
ถ้าเกิด อัพโหลดรูป โดยจะจัดเก็บไว้ใน session ก่อน เพราะจะอัพ
โดย earnlimited จ 12 พ.ย. 2007 10:29 pm บอร์ด Programming - PHP
1
1401
จ 12 พ.ย. 2007 11:25 pm โดย mindphp
BBcode Hide mod
โดย Anonymous จ 12 พ.ย. 2007 7:04 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
1333
จ 12 พ.ย. 2007 5:19 pm โดย mindphp
เรื่อง Hide mod
โดย Anonymous จ 12 พ.ย. 2007 12:16 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
1235
จ 12 พ.ย. 2007 5:33 am โดย mindphp