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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ฺB - ไม่สามารถเพิ่มข้อมูลที่อยู่ของบริษัทลูกค้าใน การออกใบ Quotations ได้
โดย watcharin พฤ 16 ส.ค. 2018 11:41 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
พฤ 16 ส.ค. 2018 11:41 am โดย watcharin
งานที่ต้องทำประจำวันที่ 16 สิงหาคม 2561
โดย tai14 พฤ 16 ส.ค. 2018 10:25 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
2
5
พฤ 16 ส.ค. 2018 11:34 am โดย AePongsak
งานประจำวันที่ 16 สิงหาคม 2561
โดย prakon พฤ 16 ส.ค. 2018 10:22 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
4
พฤ 16 ส.ค. 2018 10:23 am โดย prakon
งานประจำวันที่ 16 สิงหาคม 2561
โดย pprn พฤ 16 ส.ค. 2018 10:22 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
2
พฤ 16 ส.ค. 2018 10:22 am โดย pprn
งานประจำวันที่ 16 สิงหาคม 2561
โดย Lamduan พฤ 16 ส.ค. 2018 10:20 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
1
พฤ 16 ส.ค. 2018 10:20 am โดย Lamduan
งานประจำวันที่ 16 สิงหาคม 2561
โดย tatiya พฤ 16 ส.ค. 2018 10:00 am บอร์ด M065 - ตติยะ นาชัย
0
2
พฤ 16 ส.ค. 2018 10:00 am โดย tatiya
G - หลักการส่งข้อมูล ให้ทาง PHP รู้ว่ามี การอัพเดด stock onhand
โดย mindphp พฤ 16 ส.ค. 2018 1:52 am บอร์ด สิริกิตติรัตน์ - Developer
0
3
พฤ 16 ส.ค. 2018 1:52 am โดย mindphp
การใช้ฟังก์ชัน Filter_list
โดย anuwat somsakul พ 15 ส.ค. 2018 6:10 pm บอร์ด PHP Knowledge
0
10
พ 15 ส.ค. 2018 6:10 pm โดย anuwat somsakul
Test ระบบ Open Erp 99
โดย Lamduan พ 15 ส.ค. 2018 6:09 pm บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
8
พ 15 ส.ค. 2018 6:09 pm โดย Lamduan
วิธีอัด vdo หน้าจอด้วย Camtasia Studio
โดย tai14 พ 15 ส.ค. 2018 4:49 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
11
พ 15 ส.ค. 2018 4:49 pm โดย tai14
สอบถามวิธีการปิด .gitignore ใน netbean ไม่ให้อัพขึ้น git ค่ะ
โดย pprn พ 15 ส.ค. 2018 4:44 pm บอร์ด Programming - PHP
1
17
พ 15 ส.ค. 2018 4:55 pm โดย tsukasaz
มาทำความรู้จักกับ self ใน Python กัน
โดย tatiya พ 15 ส.ค. 2018 3:26 pm บอร์ด Python Knowledge
0
8
พ 15 ส.ค. 2018 3:26 pm โดย tatiya
Q - เพิ่มช่องค้นหาแล้ว error: Call to a member function getGroup() on null
โดย Parichat พ 15 ส.ค. 2018 3:01 pm บอร์ด Joomla Dev
1
4
พ 15 ส.ค. 2018 3:17 pm โดย Parichat
วิธีเปลี่ยนโทนสีของภาพด้วย Photoshop
โดย tai14 พ 15 ส.ค. 2018 1:10 pm บอร์ด Graphic design
1
16
พ 15 ส.ค. 2018 3:00 pm โดย mindphp
สอบถามวิธีที่ทำให้ภาพที่แสกนเสร็จไม่เด้งขึ้นมาเองค่ะ
โดย taemmynatchapon พ 15 ส.ค. 2018 12:00 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
7
พ 15 ส.ค. 2018 12:00 pm โดย taemmynatchapon
วิธีเพิ่มความคมชัดให้ภาพด้วย Photoshop
โดย tai14 พ 15 ส.ค. 2018 11:01 am บอร์ด Graphic design
0
10
พ 15 ส.ค. 2018 11:01 am โดย tai14
ตัวช่วยในการใส่ลายน้ำให้กับรูปภาพด้วย Plugin MD Watermark ใน Joomla
โดย Parichat พ 15 ส.ค. 2018 10:44 am บอร์ด PHP News
0
10
พ 15 ส.ค. 2018 10:44 am โดย Parichat
PHP:Convert Function รวมฟังก์ชันแปลงเลขฐาน
โดย anuwat somsakul พ 15 ส.ค. 2018 10:32 am บอร์ด PHP Knowledge
0
10
พ 15 ส.ค. 2018 10:32 am โดย anuwat somsakul
งานที่ต้องทำประจำวันที่ 15 สิงหาคม 2561
โดย tai14 พ 15 ส.ค. 2018 10:29 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
13
พ 15 ส.ค. 2018 7:40 pm โดย tai14
งานประจำวันที่ 15 สิงหาคม 2561
โดย Lamduan พ 15 ส.ค. 2018 10:26 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
1
8
พ 15 ส.ค. 2018 7:17 pm โดย Lamduan