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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
ปฏิทินจีนปี 2561
โดย mindphp ส 16 ธ.ค. 2017 1:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
ส 16 ธ.ค. 2017 1:25 pm โดย mindphp
แนบไฟล์ภาพ เขียน เขียน code insert จะนำข้อมูลลง DB
โดย Mmn ส 16 ธ.ค. 2017 1:12 pm บอร์ด SQL - Database
3
11
ส 16 ธ.ค. 2017 1:12 pm โดย mindphp
อัพเกรด Joomla 3.7 เป็น 3.8.3 แบบ Manual ไม่ได้ครับ
โดย Before Dong ศ 15 ธ.ค. 2017 7:07 pm บอร์ด Joomla Development
0
10
ศ 15 ธ.ค. 2017 7:07 pm โดย Before Dong
[ปัญหา] ได้ข้อมูลมา แต่ต้องการจะแยกข้อมูลทีละตัวเพื่อเอาไปใช้งานค่ะ
โดย Wallapa ศ 15 ธ.ค. 2017 7:02 pm บอร์ด Programming - C/C++ & java & Python
0
12
ศ 15 ธ.ค. 2017 7:02 pm โดย Wallapa
สงคราม OpenStack ปะทะ VMware ร้อนแรงเมื่อมี IoT และ NFV
โดย kubarnaza ศ 15 ธ.ค. 2017 5:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
13
ศ 15 ธ.ค. 2017 5:48 pm โดย kubarnaza
[ปัญหา] ดึงข้อมูลเพื่อให้แสดงค่าใน PDF แต่ Error ค่ะ
โดย Wallapa ศ 15 ธ.ค. 2017 10:59 am บอร์ด Programming - C/C++ & java & Python
4
58
ศ 15 ธ.ค. 2017 10:59 am โดย Wallapa
ปฏิทินบัญชี ที่รวบรวมวันยื่นภาษีที่ทุกองค์กรต้องยื่น ปี 2018/ ปฏิทิน 2561 พร้อมวันหยุด - โหลดก่อนได้ก่อนอย่ารอช้า!
โดย Before Dong ศ 15 ธ.ค. 2017 10:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
43
ศ 15 ธ.ค. 2017 10:23 am โดย Before Dong
ฝันร้ายของโปรแกรมเมอร์
โดย Before Dong ศ 15 ธ.ค. 2017 9:42 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
33
ศ 15 ธ.ค. 2017 9:42 am โดย mindphp
[ปัญหา] เขียน selenium เพื่อcheck error แต่โค้ดที่เขียนเกิด error
โดย Panchalee พฤ 14 ธ.ค. 2017 9:27 pm บอร์ด Programming - C/C++ & java & Python
2
27
พฤ 14 ธ.ค. 2017 9:27 pm โดย mindphp
รบกวนขอวิธีคำนวนหาจำนวนตามข้อความครับ
โดย Artayaarray Dear พฤ 14 ธ.ค. 2017 4:41 pm บอร์ด Programming - PHP
1
17
พฤ 14 ธ.ค. 2017 4:41 pm โดย thatsawan
อยากทราบขั้นตอนในการทำ selenium เพื่อเช็ค Error 404
โดย Panchalee พฤ 14 ธ.ค. 2017 3:55 pm บอร์ด Programming - C/C++ & java & Python
1
30
พฤ 14 ธ.ค. 2017 3:55 pm โดย nuattawoot
ม้าลายยุค 4.0
โดย Before Dong พฤ 14 ธ.ค. 2017 9:31 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
85
พฤ 14 ธ.ค. 2017 9:31 am โดย Before Dong
สร้างไฟล์เอกสารด้วย Reportlab (รีพอร์ตแล็บ)
โดย Wallapa พ 13 ธ.ค. 2017 5:39 pm บอร์ด Python Knowledge
0
25
พ 13 ธ.ค. 2017 5:39 pm โดย Wallapa
magento error แก้ยังไง ช่วยทีค่ะ !!!
โดย tipp3794 พ 13 ธ.ค. 2017 11:24 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
4
39
พ 13 ธ.ค. 2017 11:24 am โดย Akk Chu
Responsive Web Design Ver.ขนมปัง
โดย Before Dong พ 13 ธ.ค. 2017 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
67
พ 13 ธ.ค. 2017 10:19 am โดย Before Dong
การติดตั้ง Library บน Arduino IDE
โดย chayakan อ 12 ธ.ค. 2017 5:34 pm บอร์ด IOT - Internet of things
0
30
อ 12 ธ.ค. 2017 5:34 pm โดย chayakan
การติดตั้งโปรแกรม และการใช้งาน ArduinoIDE
โดย chayakan อ 12 ธ.ค. 2017 4:54 pm บอร์ด IOT - Internet of things
0
23
อ 12 ธ.ค. 2017 4:54 pm โดย chayakan
Arduino คืออะไร ?
โดย chayakan อ 12 ธ.ค. 2017 4:01 pm บอร์ด IOT - Internet of things
0
39
อ 12 ธ.ค. 2017 4:01 pm โดย chayakan
จะดึงข้อมูลจากฐานข้อมูล ให้มาแสดงใน PDF ค่ะ
โดย Wallapa อ 12 ธ.ค. 2017 11:33 am บอร์ด Programming - C/C++ & java & Python
4
83
อ 12 ธ.ค. 2017 11:33 am โดย Wallapa
รวมงานประจำปี 2560
โดย chayakan อ 12 ธ.ค. 2017 10:58 am บอร์ด M054 - ชญากาณฑ์ ชาญชัย
0
2
อ 12 ธ.ค. 2017 10:58 am โดย chayakan