Web Geolocation API

Pagtatalaga ng lokasyon ng user

Ang HTML Geolocation API ay ginagamit para sa pagkuha ng lokasyon ng user.

Dahil ito ay maaring makasira sa privacy, ang lokasyon ay hindi magagamit malibang na pahintulutan ng user.

亲自试一试

Komento:Ang pag-geolocation ay pinakamataas na akurado para sa mga aparato na may GPS (halimbawa, smartphones).

Ang lahat ng browser ay sumusuporta sa Geolocation API:

Chrome IE Firefox Safari Opera
Suporta Suporta Suporta Suporta Suporta

Komento:Simula sa Chrome 50, ang Geolocation API ay magiging magagamit lamang sa ligtas na konteksto, halimbawa HTTPS. Kung ang iyong site ay na-host sa hindi ligtas na pinagmulan (halimbawa HTTP), ang hiling para sa lokasyon ng user ay hindi na magiging epektibo.

Gamit ang Geolocation API

getCurrentPosition() Ang method ay para sa pagibalik ng lokasyon ng user.

Ang halimbawa sa itaas ay nagibalik ng latitude at longitude ng lokasyon ng user:

实例

<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>

亲自试一试

Pagsasalin ng halimbawa:

  1. Pagsusuri kung mayroon ang Geolocation
  2. Kung mayroon, patakbuhin ang method na getCurrentPosition(). Kung wala, ipakita sa user ang isang mensahe
  3. Kung ang method na getCurrentPosition() ay matagumpay, ibabalik ng coordinates object sa function na nakadefinir sa argumento (showPosition)
  4. Ang function na showPosition() ay naglalabas ng latitude at longitude

Ang halimbawa sa itaas ay isang napakababang script ng pag-geolocation na walang pagtanggap ng error.

Pagtanggap at pagtanggap ng error

getCurrentPosition() Ang ikalawang argumento ng paraan ay para sa pagtanggap ng error. Kung hindi maaaring makuha ang lokasyon ng user, ito ay nagtutukoy sa function na dapat patakbuhin:

实例

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Itinanggi ng user ang hiling para sa Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Ang impormasyon ng lokasyon ay hindi magagamit."
      break;
    case error.TIMEOUT:
      x.innerHTML = "Ang hiling para sa lokasyon ng user ay tumapos sa oras."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Nangyari ang isang hindi kilalang error."
      break;
  }
}

亲自试一试

Ipakita ang mga resulta sa mapa

Kung gusto mong ipakita ang mga resulta sa mapa, kailangan mong pumunta sa serbisyo ng mapa, halimbawa ang Google Maps.

Sa mga sumusunod na halimbawa, ang ibabalik na latitude at longitude ay ginagamit upang ipakita ang posisyon sa Google Maps (gamit ang statikong imahe):

实例

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+"'>";
}

Location-specific impormasyon

Ang pahinang ito ay nagpapakita kung paano ipakita ang posisyon ng user sa mapa.

Ang Geolocation ay napaka-kapaki-pakinabang para sa mga impormasyon na nakalaan sa posisyon, tulad ng:

  • Pinakabagong lokal na impormasyon
  • Ipakita ang mga interesanteng punto malapit sa user
  • Pang-iba't-ibang direksyong paglalakbay (Turn-by-turn navigation) (GPS)

getCurrentPosition() method - ibabalik ng data

getCurrentPosition() Ang method ay ibabalik ng isang object sa tagumpay. Palaging ibabalik ang mga atributo ng latitude, longitude at accuracy. Kung magagamit, ibabalik ang ibang atributo:

Atributo Ibalik
coords.latitude Ang latitudeng ibinigay bilang decimal (palaging ibabalik).
coords.longitude Ang longhitudeng ibinigay bilang decimal (palaging ibabalik).
coords.accuracy Ang kagamitan ng pagtutuos ng posisyon (palaging ibabalik).
coords.altitude Ang taas mula sa pangkaraniwang lebel ng dagat (sa metro) (kung magagamit ay ibabalik).
coords.altitudeAccuracy Ang kagamitan ng taas ng posisyon (kung magagamit ay ibabalik).
coords.heading Ang takbo mula sa hilaga sa paglipas ng oras sa pagliko (kung magagamit ay ibabalik).
coords.speed Ang bilis sa metro/bawat segundo (kung magagamit ay ibabalik).
timestamp Ang kasalukuyang petsa at oras ng tugon (kung magagamit ay ibabalik).

Geolocation object - iba pang kagiliw-giliw na paraan

May iba pang mga kagiliw-giliw na paraan ng Geolocation object:

  • watchPosition() - Ibabalik ang kasalukuyang posisyon ng user, at magpatuloy sa pagbabalik ng mga nagbabago na posisyon habang ang user ay gumagalaw (tulad ng GPS sa sasakyan).
  • clearWatch() - Patigilin ang watchPosition () method.

下面的例子展示了 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>

亲自试一试