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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Work Shop การรับชำระ ในระบบ Open ERP
โดย EyePornnipa จ 24 มิ.ย. 2019 7:00 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
8
จ 24 มิ.ย. 2019 7:00 pm โดย EyePornnipa
ย่อขนาดรูปด้วยโปรแกรม Gimp
โดย jamepiyawat จ 24 มิ.ย. 2019 6:49 pm บอร์ด Graphic design
0
3
จ 24 มิ.ย. 2019 6:49 pm โดย jamepiyawat
ทำความรู้จักกับ Sensor water flow
โดย Patipat จ 24 มิ.ย. 2019 6:42 pm บอร์ด IOT - Internet of things
0
5
จ 24 มิ.ย. 2019 6:42 pm โดย Patipat
VDO การสร้างลิงค์ แอดเพื่อน ใน Line
โดย chatee supasand จ 24 มิ.ย. 2019 6:15 pm บอร์ด MT33 - นายชาตรี สุภาแสน
0
3
จ 24 มิ.ย. 2019 6:15 pm โดย chatee supasand
B - กด SAVE การรับชำระไม่ได้
โดย EyePornnipa จ 24 มิ.ย. 2019 6:01 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
5
จ 24 มิ.ย. 2019 6:01 pm โดย EyePornnipa
มารู้จักตัวแปรชนิด tuple ในภาษา python
โดย jirawoot จ 24 มิ.ย. 2019 5:50 pm บอร์ด Python Knowledge
0
5
จ 24 มิ.ย. 2019 5:50 pm โดย jirawoot
วิธีทำขอบตัวอักษรด้วย Gimp
โดย jamepiyawat จ 24 มิ.ย. 2019 5:17 pm บอร์ด Graphic design
1
15
จ 24 มิ.ย. 2019 6:12 pm โดย mindphp
ตัวอย่างการใช้ Function str_replace() ลบcomma(,) ออกจากจำนวนตัวเลข
โดย Patipat จ 24 มิ.ย. 2019 5:12 pm บอร์ด PHP Knowledge
0
10
จ 24 มิ.ย. 2019 5:12 pm โดย Patipat
การใช้ Script กรอกข้อมูลตัวเลขจำนวนแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 4:53 pm บอร์ด Jquery & Ajax Knowledge
0
5
จ 24 มิ.ย. 2019 4:53 pm โดย Patipat
มารู้จักตัวแปร list ในภาษา python
โดย jirawoot จ 24 มิ.ย. 2019 4:47 pm บอร์ด Python Knowledge
0
5
จ 24 มิ.ย. 2019 4:47 pm โดย jirawoot
การ download คลิป ใน youtube ด้วย clipconverter
โดย jirawoot จ 24 มิ.ย. 2019 3:46 pm บอร์ด Share Knowledge
0
7
จ 24 มิ.ย. 2019 3:46 pm โดย jirawoot
เมื่อคุณลงโปรแกรมอะไรสักอย่างแล้วเกิดเหตุการณ์แบบนี้ขึ้น
โดย chatee supasand จ 24 มิ.ย. 2019 3:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
จ 24 มิ.ย. 2019 3:19 pm โดย chatee supasand
การใช้ Script กรอกข้อมูลตัวเลขจำนวนแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 2:44 pm บอร์ด JavaScript & Jquery Ajax
0
7
จ 24 มิ.ย. 2019 2:44 pm โดย Patipat
VDO การใช้งาน ระบบ ERP และเรียนรู้งานบริการของบริษัท
โดย EyePornnipa จ 24 มิ.ย. 2019 2:40 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
27
จ 24 มิ.ย. 2019 2:40 pm โดย EyePornnipa
B - รบกวนตรวจสอบปัญหาการสั่งซื้อของลูกค้าด่วนครับ [2019-06][021]
โดย tsukasaz จ 24 มิ.ย. 2019 2:27 pm บอร์ด Diageo - Web Ordering - Tester
1
2
จ 24 มิ.ย. 2019 3:15 pm โดย tsukasaz
เปลี่ยนเว็บให้ต่างประเทศเป็นภาษาไทย google แปลภาษา
โดย jamepiyawat จ 24 มิ.ย. 2019 12:44 pm บอร์ด Share Knowledge
0
11
จ 24 มิ.ย. 2019 12:44 pm โดย jamepiyawat
อยากทราบวิธีใช้ Script พอกดเลขแล้วให้ขึ้นคอมม่า(,)ภาษา PHP
โดย Patipat จ 24 มิ.ย. 2019 11:39 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
18
จ 24 มิ.ย. 2019 2:10 pm โดย Patipat
Windows Terminal เวอร์ชั่นใหม่ออกมาแล้ว ดาวน์โหลดได้เลยที่ Microsoft Store
โดย chatee supasand จ 24 มิ.ย. 2019 11:26 am บอร์ด Microsoft Office Knowledge & line & Etc
0
4
จ 24 มิ.ย. 2019 11:26 am โดย chatee supasand
ใน phpbb 3.1 ถ้าเราต้องการเปิดสิทธิ์ให้ user สามารถแก้ไข โพสต์ user อื่นได้ต้องตั้งค่ายังไงค่ะ
โดย thatsawan จ 24 มิ.ย. 2019 11:13 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
8
จ 24 มิ.ย. 2019 11:13 am โดย thatsawan
B - การแสดงผล Database Summary [2019-06][007]
โดย tsukasaz จ 24 มิ.ย. 2019 10:56 am บอร์ด IIEC - Feedback Service System - Tester
1
2
จ 24 มิ.ย. 2019 11:54 am โดย tsukasaz