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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Tip CSS : การทำ Tooltips (ทูลทิปส์) โดยแสดงข้อความที่ซ้อนให้อยู่บรรทัดเดียวกัน แบบง่ายๆ
โดย pprn พฤ 12 ก.ค. 2018 11:50 am บอร์ด CSS Knowledge
0
18
พฤ 12 ก.ค. 2018 11:50 am โดย pprn
วิธีการเพิ่ม เปลี่ยนแปลง หรือลบการเข้าสู่ระบบลายนิ้วมือ Fingerprint
โดย thatsawan พฤ 12 ก.ค. 2018 10:40 am บอร์ด Microsoft Office Knowledge & line & Etc
0
17
พฤ 12 ก.ค. 2018 10:40 am โดย thatsawan
แนะนำการใช้บอร์ด ESP8266
โดย prakon พฤ 12 ก.ค. 2018 10:27 am บอร์ด Python Knowledge
0
59
พฤ 12 ก.ค. 2018 10:27 am โดย prakon
งานประจำวันที่ 12 กรกฏาคม 2561
โดย pprn พฤ 12 ก.ค. 2018 10:17 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
23
พฤ 12 ก.ค. 2018 7:05 pm โดย pprn
งานประจำวันที่ 12 กรกฎาคม 2561
โดย prakon พฤ 12 ก.ค. 2018 10:00 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
3
17
ศ 13 ก.ค. 2018 9:24 am โดย prakon
งานประจำวันที่ 12 กรกาคม 2561
โดย tatiya พฤ 12 ก.ค. 2018 9:48 am บอร์ด M065 - ตติยะ นาชัย
1
10
พฤ 12 ก.ค. 2018 7:04 pm โดย tatiya
[ปัญหา] การติดตั้ง Pycharm บน Ubuntu
โดย tatiya พ 11 ก.ค. 2018 11:42 am บอร์ด Programming - C/C++ & java & Python
6
86
พฤ 12 ก.ค. 2018 3:40 pm โดย tatiya
Tip CSS : Word Breaking (การทำให้ text html element ไม่ล้น)
โดย pprn พ 11 ก.ค. 2018 4:46 pm บอร์ด CSS Knowledge
0
19
พ 11 ก.ค. 2018 4:46 pm โดย pprn
Tip CSS : CSS Word Wrap (การแสดงขึ้นบรรทัดใหม่ตามความยาวที่กำหนด)
โดย pprn พ 11 ก.ค. 2018 4:23 pm บอร์ด CSS Knowledge
0
15
พ 11 ก.ค. 2018 4:23 pm โดย pprn
Tip CSS : Text Overflow (การแสดงข้อความแบบตัดคำ)
โดย pprn พ 11 ก.ค. 2018 4:02 pm บอร์ด CSS Knowledge
0
23
พ 11 ก.ค. 2018 4:02 pm โดย pprn
Tip CSS : Box Shadow Effects (เอฟเฟ็คเงาของกล่องข้อความ)
โดย pprn พ 11 ก.ค. 2018 3:26 pm บอร์ด CSS Knowledge
0
19
พ 11 ก.ค. 2018 3:26 pm โดย pprn
การใช้งาน relay ร่วมกับ บอร์ด raspberri pi
โดย prakon พ 11 ก.ค. 2018 3:15 pm บอร์ด IOT - Internet of things
0
38
พ 11 ก.ค. 2018 3:15 pm โดย prakon
Tip CSS : Text Shadow Effects (เอฟเฟ็คเงาของตัวอักษร)
โดย pprn พ 11 ก.ค. 2018 2:46 pm บอร์ด CSS Knowledge
0
12
พ 11 ก.ค. 2018 2:46 pm โดย pprn
การใช้งาน gitlab ร่วมกับ netbean เบื้องต้น
โดย pprn พ 11 ก.ค. 2018 2:15 pm บอร์ด Joomla Developing Knowledge
0
26
พ 11 ก.ค. 2018 2:15 pm โดย pprn
งานประจำวันที่ 11 กรกฏาคม 2561
โดย pprn พ 11 ก.ค. 2018 10:43 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
28
พ 11 ก.ค. 2018 12:22 pm โดย pprn
งานประจำวันที่ 11 กรกฎาคม 2561
โดย prakon พ 11 ก.ค. 2018 10:20 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
22
พ 11 ก.ค. 2018 10:20 am โดย prakon
งานประจำวันที่ 11 กรกฎาคม 2018
โดย tatiya พ 11 ก.ค. 2018 9:50 am บอร์ด M065 - ตติยะ นาชัย
2
50
พ 11 ก.ค. 2018 6:09 pm โดย AePongsak
USB 3.1 with Gen 1 เเละ USB Type-C port คืออะไรค่ะ
โดย thatsawan พ 11 ก.ค. 2018 9:25 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
30
พฤ 12 ก.ค. 2018 4:40 am โดย mindphp
B - การใช้งาน Key รายการผิด so, inv, ใบเสร็จ vat ไม่ตรงความความเป็นจริง
โดย mindphp อ 10 ก.ค. 2018 10:53 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
อ 10 ก.ค. 2018 10:53 pm โดย mindphp
[ปัญหา] ใช้ภาษา python เชื่อมต่อกับฐานข้อมูล PostgreSQL แล้วไม่สามารถอัพข้อมูลขึ้นตารางได้บางส่วน
โดย prakon อ 10 ก.ค. 2018 7:00 pm บอร์ด Programming - C/C++ & java & Python
3
74
พ 11 ก.ค. 2018 11:50 am โดย nuattawoot