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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
innerHTML คำสั่ง javascript ที่จะทำให้สามารถแสดงข้อความแทนที่ข้อความในแท็ก HTML
โดย jamepiyawat ศ 15 พ.ย. 2019 3:47 pm บอร์ด Jquery & Ajax Knowledge
1
4
ศ 15 พ.ย. 2019 5:02 pm โดย mindphp
หลักการตั้งชื่อไฟล์เพื่อให้สื่อกับทีมง่าย
โดย numtan5839 ศ 15 พ.ย. 2019 3:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
ศ 15 พ.ย. 2019 3:20 pm โดย numtan5839
การใช้ .text() .html() และ .val() เพื่อเปลี่ยนข้อความ เมื่อกดปุ่ม
โดย bankjittapol ศ 15 พ.ย. 2019 2:17 pm บอร์ด Jquery & Ajax Knowledge
0
6
ศ 15 พ.ย. 2019 2:17 pm โดย bankjittapol
วงจรสี (Colour Wheel)
โดย numtan5839 ศ 15 พ.ย. 2019 2:13 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
16
ศ 15 พ.ย. 2019 3:33 pm โดย numtan5839
จะเรียกใช้ api ของกรมอุตุ ได้อย่างไรครับ
โดย jamepiyawat พ 06 พ.ย. 2019 3:02 pm บอร์ด Programming - PHP
2
35
ศ 15 พ.ย. 2019 1:44 pm โดย aloha11x
การใส่ Intro Outro และการตัดต่อ VDO
โดย numtan5839 ศ 15 พ.ย. 2019 1:41 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
0
8
ศ 15 พ.ย. 2019 1:41 pm โดย numtan5839
ต้องการให้ ฐานข้อมูลบันทึกที่อยู่ของ รูปภาพ
โดย bankjittapol พ 06 พ.ย. 2019 3:51 pm บอร์ด Programming - PHP
3
42
ศ 15 พ.ย. 2019 5:19 pm โดย Losa
ต้องการให้ค่า transform เก็บไว้ในตัวแปร เพื่อเก็บในฐานข้อมูล
โดย bankjittapol จ 11 พ.ย. 2019 11:17 am บอร์ด Programming - PHP
3
32
ศ 15 พ.ย. 2019 12:43 pm โดย mindphp
จะทำอย่างไรให้ php เป็นเวอร์ชั่น 5 ครับ
โดย jamepiyawat ส 09 พ.ย. 2019 5:13 pm บอร์ด Programming - PHP
1
22
ศ 15 พ.ย. 2019 12:41 pm โดย mindphp
อยากทราบการหาพิกัด GPS จากรูปภาพ เพื่อนำข้อมูลมาใช้ในการแสดงพิกัดบนแผนที่ โดยใช้ภาษา PHP
โดย chaiyasitpraphut ศ 15 พ.ย. 2019 11:57 am บอร์ด Programming - PHP
1
8
ศ 15 พ.ย. 2019 12:40 pm โดย mindphp
ช่วยแนะนำวิธีการเอาค่าใน array มาใช้หน่อยครับ
โดย bankjittapol ศ 15 พ.ย. 2019 10:45 am บอร์ด Programming - PHP
2
20
ศ 15 พ.ย. 2019 11:54 am โดย bankjittapol
แปลงหน่วย bytes kb mb gb
โดย chaiyasitpraphut ศ 15 พ.ย. 2019 10:39 am บอร์ด MindPHP News / Feedback
0
5
ศ 15 พ.ย. 2019 10:39 am โดย chaiyasitpraphut
เช็คภาษีมูลค่าเพิ่ม
โดย chaiyasitpraphut ศ 15 พ.ย. 2019 10:09 am บอร์ด MindPHP News / Feedback
0
8
ศ 15 พ.ย. 2019 10:09 am โดย chaiyasitpraphut
ตรวจสอบไอพี แอดเดรส
โดย chaiyasitpraphut ศ 15 พ.ย. 2019 9:54 am บอร์ด MindPHP News / Feedback
0
6
ศ 15 พ.ย. 2019 9:54 am โดย chaiyasitpraphut
VDO - โปรแกรมคำนวณอัตราแลกเปลี่ยนสกุลเงิน
โดย numtan5839 พฤ 07 พ.ย. 2019 4:05 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
21
117
ศ 15 พ.ย. 2019 9:51 am โดย numtan5839
VDO - โปรแกรมตรวจสอบหมายเลขพัสดุ
โดย numtan5839 พฤ 07 พ.ย. 2019 3:57 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
15
82
ศ 15 พ.ย. 2019 9:50 am โดย numtan5839
VDO - การใช้โปรแกรมคำนวน ค่าเฉลี่ย, ค่าแปรปรวน, ค่าเบี่ยงเบนมาตราฐาน
โดย numtan5839 พฤ 07 พ.ย. 2019 2:54 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
11
110
ศ 15 พ.ย. 2019 9:50 am โดย numtan5839
VDO - การใช้โปรแกรมคำนวณสแควรูท
โดย numtan5839 พฤ 07 พ.ย. 2019 3:18 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
9
72
ศ 15 พ.ย. 2019 9:47 am โดย numtan5839
งานประจำวันที่ 15 พฤศจิกายน 2562
โดย numtan5839 ศ 15 พ.ย. 2019 9:38 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
13
ศ 15 พ.ย. 2019 1:06 pm โดย mindphp
งานประจำวันที่ 15 พฤศจิกายน 2562
โดย chaiyasitpraphut ศ 15 พ.ย. 2019 9:03 am บอร์ด MT35 - นายชัยยะสิทธิ์ พระพุทธ
0
8
ศ 15 พ.ย. 2019 9:03 am โดย chaiyasitpraphut