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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามเกี่ยวกับการตั้งค่า Jabber phpBB3.2.x
โดย AePongsak จ 22 ม.ค. 2018 5:54 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
8
จ 22 ม.ค. 2018 5:54 pm โดย AePongsak
เสือชีตาห์ Vs โปรแกรมเมอร์
โดย Before Dong จ 22 ม.ค. 2018 11:14 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
19
จ 22 ม.ค. 2018 11:31 am โดย Before Dong
งานประจำวันที่ 22 มกราคม 2561
โดย Parichat จ 22 ม.ค. 2018 9:57 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
7
จ 22 ม.ค. 2018 7:20 pm โดย Parichat
งานประจำวันที่ 22 มกราคม 2561
โดย Four จ 22 ม.ค. 2018 9:48 am บอร์ด MT22 - อิษยา งามสอาด
1
32
จ 22 ม.ค. 2018 11:23 am โดย Four
งานประจำวันที่ 22 มกราคม 2561
โดย Jom07 จ 22 ม.ค. 2018 9:47 am บอร์ด MT23 - สุพรรษา พูลตา
2
19
จ 22 ม.ค. 2018 11:01 am โดย AePongsak
งานประจำวันที่ 19 มกราคาม 2561
โดย Parichat ศ 19 ม.ค. 2018 8:52 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
8
ศ 19 ม.ค. 2018 7:33 pm โดย Parichat
งานประจำวันที่ 19 มกราคม 2561
โดย Jom07 ศ 19 ม.ค. 2018 8:43 am บอร์ด MT23 - สุพรรษา พูลตา
1
26
ศ 19 ม.ค. 2018 9:20 am โดย Jom07
งานประจำวันที่ 19 มกราคม 2561
โดย Four ศ 19 ม.ค. 2018 8:42 am บอร์ด MT22 - อิษยา งามสอาด
4
25
ศ 19 ม.ค. 2018 6:43 pm โดย Four
ตัวแปรชนิด Tuple
โดย Four พฤ 18 ม.ค. 2018 5:18 pm บอร์ด Python Knowledge
0
35
พฤ 18 ม.ค. 2018 5:18 pm โดย Four
ขอสอบถามเรื่องความแตกต่างของฟังก์ชั่นvariant_pow()กับฟังก์ชั่น pow()
โดย Parichat พฤ 18 ม.ค. 2018 1:58 pm บอร์ด Programming - PHP
0
31
พฤ 18 ม.ค. 2018 1:58 pm โดย Parichat
อยากได้โปรแกรม command แบบ cmd ที่เก็บ history ได้ค่ะช่วยเเนะนำหน่อย
โดย thatsawan พฤ 18 ม.ค. 2018 11:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
60
พฤ 18 ม.ค. 2018 7:18 pm โดย thatsawan
0vsNULL
โดย Before Dong พฤ 18 ม.ค. 2018 10:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
45
พฤ 18 ม.ค. 2018 2:51 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Parichat พฤ 18 ม.ค. 2018 9:38 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
1
14
พฤ 18 ม.ค. 2018 7:16 pm โดย Parichat
งานประจำวันที่ 18 มกราคม 2561
โดย Jom07 พฤ 18 ม.ค. 2018 9:27 am บอร์ด MT23 - สุพรรษา พูลตา
2
34
พฤ 18 ม.ค. 2018 6:49 pm โดย Before Dong
งานประจำวันที่ 18 มกราคม 2561
โดย Four พฤ 18 ม.ค. 2018 9:24 am บอร์ด MT22 - อิษยา งามสอาด
1
23
พฤ 18 ม.ค. 2018 11:44 am โดย Four
VDO สอนพัฒนา Componet Joomla ภาษาอังกฤษ By Mindphp Developer Team
โดย mindphp พฤ 18 ม.ค. 2018 6:21 am บอร์ด Joomla Development
0
33
พฤ 18 ม.ค. 2018 6:21 am โดย mindphp
Ozio Gallery-Components & Plugins สำหรับช่วยให้ดูภาพที่เผยแพร่บน Googleและวีดีโอจาก Youtube ที่ละเอียด
โดย Parichat พ 17 ม.ค. 2018 7:30 pm บอร์ด Joomla Extension Review
0
54
พ 17 ม.ค. 2018 7:30 pm โดย Parichat
ตัวดำเนินการของตัวแปร List
โดย Four พ 17 ม.ค. 2018 4:35 pm บอร์ด Python Knowledge
0
36
พ 17 ม.ค. 2018 4:35 pm โดย Four
การใช้ Del statement
โดย Four พ 17 ม.ค. 2018 4:03 pm บอร์ด Python Knowledge
0
33
พ 17 ม.ค. 2018 4:03 pm โดย Four
Review Applications 17 มกราคม 2561
โดย Jom07 พ 17 ม.ค. 2018 3:44 pm บอร์ด MT23 - สุพรรษา พูลตา
1
18
พ 17 ม.ค. 2018 6:19 pm โดย Jom07