Web Geolocation API

Locate the user's location

HTML Geolocation API is used to obtain the user's location.

Because this may harm privacy, location is not available unless the user approves.

ທຳການທີ່ພາຍໃນ

注释：地理定位对于带有 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);
  } 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>

ທຳການທີ່ພາຍໃນ

例子解释：

  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 Maps (ໃຊ້ພາບສະຖານະສະໄຫມ):

ຄວາມຈຳນວນ

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);
  } 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>

ທຳການທີ່ພາຍໃນ