บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

HTML Geolocation API


HTML Geolocation API ใช้เพื่อค้นหาตำแหน่งของผู้ใช้


ค้นหาตำแหน่งของผู้ใช้

HTML Geolocation API ใช้เพื่อรับตำแหน่งทางภูมิศาสตร์ของผู้ใช้

เนื่องจากสิ่งนี้สามารถประนีประนอมความเป็นส่วนตัว ตำแหน่งจึงไม่สามารถใช้ได้เว้นแต่ผู้ใช้จะอนุมัติ

หมายเหตุ: การระบุตำแหน่งทางภูมิศาสตร์นั้นแม่นยำที่สุดสำหรับอุปกรณ์ที่มี GPS เช่น สมาร์ทโฟน


รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับตำแหน่งทางภูมิศาสตร์อย่างสมบูรณ์

API
Geolocation 5.0 - 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0

หมายเหตุ:ตั้งแต่ Chrome 50 เป็นต้นไป Geolocation API จะทำงานบนบริบทที่ปลอดภัย เช่น HTTPS เท่านั้น หากไซต์ของคุณโฮสต์บนต้นทางที่ไม่ปลอดภัย (เช่น HTTP) คำขอรับตำแหน่งของผู้ใช้จะไม่ทำงานอีกต่อไป


ใช้ HTML Geolocation

วิธี การgetCurrentPosition()นี้ใช้เพื่อคืนตำแหน่งของผู้ใช้

ตัวอย่างด้านล่างจะคืนค่าละติจูดและลองจิจูดของตำแหน่งผู้ใช้:

ตัวอย่าง

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

ตัวอย่างอธิบาย:

  • ตรวจสอบว่ารองรับตำแหน่งทางภูมิศาสตร์หรือไม่
  • หากได้รับการสนับสนุน ให้เรียกใช้เมธอด getCurrentPosition() ถ้าไม่แสดงข้อความถึงผู้ใช้
  • หากเมธอด getCurrentPosition() สำเร็จ มันจะส่งคืนอ็อบเจ็กต์พิกัดไปยังฟังก์ชันที่ระบุในพารามิเตอร์ (showPosition)
  • ฟังก์ชัน showPosition() จะแสดงค่าละติจูดและลองจิจูด

ตัวอย่างข้างต้นเป็นสคริปต์ตำแหน่งทางภูมิศาสตร์พื้นฐาน โดยไม่มีข้อผิดพลาดในการจัดการ



การจัดการข้อผิดพลาดและการปฏิเสธ

พารามิเตอร์ที่สองของgetCurrentPosition()วิธีการนี้ใช้เพื่อจัดการกับข้อผิดพลาด ระบุฟังก์ชันที่จะเรียกใช้หากไม่สามารถรับตำแหน่งของผู้ใช้ได้:

ตัวอย่าง

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

ข้อมูลเฉพาะสถานที่

หน้านี้แสดงวิธีแสดงตำแหน่งของผู้ใช้บนแผนที่

ตำแหน่งทางภูมิศาสตร์ยังมีประโยชน์มากสำหรับข้อมูลเฉพาะตำแหน่ง เช่น:

  • ข้อมูลท้องถิ่นที่ทันสมัย
  • แสดงจุดที่น่าสนใจใกล้ผู้ใช้
  • การนำทางแบบเลี้ยวต่อเลี้ยว (GPS)

เมธอด getCurrentPosition() - ส่งคืน Data

วิธี การgetCurrentPosition()ส่งคืนวัตถุเมื่อสำเร็จ คุณสมบัติละติจูด ลองจิจูด และความแม่นยำจะถูกส่งกลับเสมอ คุณสมบัติอื่น ๆ จะถูกส่งคืนหากมี:

Property Returns
coords.latitude The latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)

Geolocation Object - วิธีการที่น่าสนใจอื่น ๆ

วัตถุ Geolocation ยังมีวิธีการอื่นๆ ที่น่าสนใจอีกด้วย:

  • watchPosition() - ส่งคืนตำแหน่งปัจจุบันของผู้ใช้และยังคงส่งคืนตำแหน่งที่อัปเดตเมื่อผู้ใช้เคลื่อนที่ (เช่น GPS ในรถยนต์)
  • clearWatch()- หยุดwatchPosition()วิธีการ

ตัวอย่างด้านล่างแสดงwatchPosition()วิธีการ คุณต้องมีอุปกรณ์ GPS ที่แม่นยำเพื่อทดสอบสิ่งนี้ (เช่นสมาร์ทโฟน):

ตัวอย่าง

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>