Web Geolocation API

ตำแหน่งผู้ใช้

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

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

ทดสอบด้วยตัวเอง

หมายเหตุ:การที่วางแผนที่สำหรับอุปกรณ์ที่มี GPS (เช่น มือถือ) จะแน่นอนที่สุด

ทุกเครื่องมือเบราเซอร์สนับสนุน Geolocation API:

Chrome IE Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

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

ใช้ Geolocation API

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

ตัวอย่างดังกล่าวนี้กลับค่าละติจูดและจังหวะตำแหน่งผู้ใช้

ตัวอย่าง

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "การตรวจจับตำแหน่งทางภูมิศาสตร์ไม่สนับสนุนโดยเบราเซอร์นี้.";
  }
}
function showPosition(position) {
  x.innerHTML = "จุดแบบแบนด์: " + position.coords.latitude +
  "<br>จุดแบบแบนด์: " + position.coords.longitude;
}
</script>

ทดสอบด้วยตัวเอง

ชี้แจงตัวอย่าง:

  1. ตรวจสอบว่าเครื่องมือสนับสนุน Geolocation
  2. ถ้าสนับสนุน โปรดปฏิบัติตามวิธี getCurrentPosition() ถ้าไม่สนับสนุน โปรดแสดงข้อความแก่ผู้ใช้
  3. ถ้าวิธี getCurrentPosition() สำเร็จ มันจะส่งค่าตัวแปร coordinates ไปยังฟังก์ชันที่กำหนดในตัวแปร (showPosition)
  4. ฟังก์ชัน 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;
  }
}

ทดสอบด้วยตัวเอง

แสดงผลในแผนที่

เพื่อแสดงผลในแผนที่ คุณต้องเข้าถึงบริการแผนที่ เช่น Google แผนที่

ในตัวอย่างด้านล่างนี้ วงจรพิกัดและลองจิจูดที่กลับค่าใช้ในการแสดงตำแหน่งบน Google แมบ (ใช้รูปภาพสตาติก):

ตัวอย่าง

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

ข้อมูลที่เกี่ยวข้องกับตำแหน่ง

เพราะนั้น หน้านี้แสดงวิธีการแสดงตำแหน่งผู้ใช้บนแผนที่

Geolocation มีประโยชน์มากในข้อมูลที่เกี่ยวข้องกับตำแหน่งเช่นนี้:

  • ข้อมูลท้องถิ่นที่ปัจจุบัน
  • แสดงจุดน่าสนใจใกล้ตำแหน่งผู้ใช้
  • การนำทางทางตามทิศทาง (Turn-by-turn navigation) (GPS)

getCurrentPosition() วิธี - กลับค่าข้อมูล

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

ตัวแปร กลับค่า
coords.latitude วงจรพิกัด (ในระบบสิบเศษ) (เสมอไปทุกครั้งที่กลับค่า)
coords.longitude ลองจิจูด (ในระบบสิบเศษ) (เสมอไปทุกครั้งที่กลับค่า)
coords.accuracy ความเพียงของตำแหน่ง (เสมอไปทุกครั้งที่กลับค่า)
coords.altitude ความสูงเหนือระดับน้ำทะเล (ในหน่วยเมตร) (ถ้ามีค่าก็จะกลับค่า)
coords.altitudeAccuracy ความเพียงของตำแหน่งสูง (ถ้ามีค่าก็จะกลับค่า)
coords.heading ทิศทางที่มุ่งหน้า (จากทิศเหนือเลี้ยวออกไปทางเชิงโค้ง) (ถ้ามีค่าก็จะกลับค่า)
coords.speed ความเร็ว (ในหน่วยเมตร/วินาที) (ถ้ามีค่าก็จะกลับค่า)
timestamp วัน/เวลาที่ตอบ (ถ้ามีค่าก็จะกลับค่า)

Geolocation มีวิธีที่น่าสนใจอื่นๆ

Geolocation มีวิธีที่น่าสนใจอื่นๆ ด้วย:

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

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

ตัวอย่าง

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  }
    x.innerHTML = "การตรวจจับตำแหน่งทางภูมิศาสตร์ไม่สนับสนุนโดยเบราเซอร์นี้.";
  }
}
function showPosition(position) {
  x.innerHTML = "จุดแบบแบนด์: " + position.coords.latitude +
  "<br>จุดแบบแบนด์: " + position.coords.longitude;
}
</script>

ทดสอบด้วยตัวเอง