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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ใครเขียน หรือ สอน python เป็นบ้างครับ
โดย mindphp จ 29 ม.ค. 2007 9:14 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
3312
ศ 02 พฤษภาคม 2008 6:20 am โดย yimplex
แบ่งหน้า pdf โดย php
โดย aunohara ศ 26 ม.ค. 2007 2:38 pm บอร์ด Programming - PHP
5
2712
ศ 09 ก.พ. 2007 1:40 pm โดย aunohara
ช่วยบอกโค้ดเขียน counter
โดย piyada ศ 26 ม.ค. 2007 8:50 am บอร์ด Programming - PHP
1
2012
ส 27 ม.ค. 2007 9:58 am โดย mindphp
Searchช่วยผมหน่อย
โดย superrookie พ 24 ม.ค. 2007 11:18 am บอร์ด Programming - PHP
3
1982
พ 24 ม.ค. 2007 12:02 pm โดย mindphp
ขอทราบวิธีการติดตั้งโปรแกรม XOOPS ค่ะ
โดย piyada พ 24 ม.ค. 2007 8:46 am บอร์ด Programming - PHP
2
2528
พ 24 ม.ค. 2007 12:07 pm โดย mindphp
ติดตั้ง apache2.2.4-php5.0.5-mysqlCC0.9.4 บน Win XP
โดย polarbear อ 23 ม.ค. 2007 8:49 pm บอร์ด Programming - PHP
1
1703
อ 23 ม.ค. 2007 10:39 pm โดย mindphp
รบกวนอยากได้โปรแกรม XOOPS และวิธีการติดตั้งค่ะ
โดย piyada อ 23 ม.ค. 2007 3:26 pm บอร์ด Programming - PHP
1
2053
อ 23 ม.ค. 2007 3:40 pm โดย mindphp
[ขอ] java script การนับเวลาถอยหลัง
โดย nongnoo_10 จ 22 ม.ค. 2007 11:04 am บอร์ด JavaScript & Jquery Ajax
1
5067
จ 22 ม.ค. 2007 11:15 am โดย mindphp
กรมการปกครอง กระทรวงมหาดไทย โดย กองวิชาการและแผนงาน ขอเชิญชว
โดย mindphp อ 21 ม.ค. 2007 1:41 am บอร์ด PHP News
0
4373
อ 21 ม.ค. 2007 1:41 am โดย mindphp
จากบทความ list menu 2 ชั้น -ไม่ออกครับ
โดย aunohara ส 20 ม.ค. 2007 7:54 pm บอร์ด Programming - PHP
49
8487
ศ 26 ม.ค. 2007 1:27 pm โดย aunohara
ช่วยด้วยครับ จนปัญญาจริงๆๆ
โดย suree ส 20 ม.ค. 2007 10:32 am บอร์ด Programming - PHP
9
2824
อ 21 ม.ค. 2007 8:40 pm โดย mindphp
การ Getip address เป็น php
โดย piyada ศ 19 ม.ค. 2007 2:46 pm บอร์ด Programming - PHP
1
1589
ศ 19 ม.ค. 2007 6:54 pm โดย mindphp
อัพโหลดไฟล์ php ขึ้น server แล้วทำไมกลายเป็น.htm
โดย aa_aa ศ 19 ม.ค. 2007 9:07 am บอร์ด Programming - PHP
1
1573
ศ 19 ม.ค. 2007 11:14 am โดย mindphp
รบกวน ช่วยบอกโค้ด หรือ วิธีเกี่ยวกับการบันทึก IP Address ค่ะ
โดย piyada พฤ 18 ม.ค. 2007 4:35 pm บอร์ด Programming - PHP
1
1598
พฤ 18 ม.ค. 2007 8:12 pm โดย mindphp
อยากถามเกี่ยวกับ smarty น่ะคับ เรื่องของ foreach
โดย nongball อ 16 ม.ค. 2007 3:55 pm บอร์ด Programming - PHP
5
2036
พ 17 ม.ค. 2007 11:41 am โดย mindphp
ผมมีปัญหาครับ เรื่อง form
โดย iamyon จ 15 ม.ค. 2007 5:07 pm บอร์ด Programming - PHP
3
2037
จ 15 ม.ค. 2007 7:54 pm โดย mindphp
ต้องการกำหนดระดับสมาชิกต้องทำงัย
โดย aa_aa จ 15 ม.ค. 2007 12:00 pm บอร์ด Programming - PHP
1
1591
จ 15 ม.ค. 2007 4:23 pm โดย mindphp
agsmail mail server ติดตั้ง วิธีการส่งเมล ด้วย php
โดย mindphp อ 14 ม.ค. 2007 9:45 am บอร์ด Programming - PHP
1
2914
พฤ 22 มี.ค. 2007 1:48 am โดย mindphp
ขอ code ดาวน์โหลดไฟล์ และ อัพโหลดไฟล์ครั้งละหลายไฟล์
โดย arin อ 14 ม.ค. 2007 12:17 am บอร์ด Programming - PHP
2
2795
อ 14 ม.ค. 2007 5:57 pm โดย arin
php random password
โดย mindphp ศ 12 ม.ค. 2007 12:51 am บอร์ด Programming - PHP
0
2482
ศ 12 ม.ค. 2007 12:51 am โดย mindphp