HTML5 Geolocation

HTML5 Geolocation (geolocation) ay ginagamit para sa paglokasyon ng lokasyon ng user.

Subukan nang personal: Ipakita ang iyong lokasyon sa Google Maps

Lokasyon ng user

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

Dahil ang katangian na ito ay maaaring lumabag sa pribadong kalagayan ng user, ang impormasyon ng lokasyon ng user ay hindi magagamit malibang ang pagsang-ayon ng user.

Suporta ng browser

Internet Explorer 9, Firefox, Chrome, Safari at Opera ay sumusuporta sa geolocation.

Komento:Para sa mga aparato na may GPS, tulad ng iPhone, ang geolocation ay mas tumpak.

HTML5 - Gamit ang geolocation

Gamitin ang method na getCurrentPosition() upang makakuha ng lokasyon ng user.

Ang halimbawa na ito ay isang simpleng halimbawa ng geolocation na maaaring ibalik ang latitude at longitude ng lokasyon ng user.

实例

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

亲自试一试

Paliwanag:

  • Suruhin kung pinapayagan ang geolocation
  • Kung pinapayagan, magpatakbo ng method na getCurrentPosition(). Kung hindi, ipakita sa user ang isang mensahe.
  • Kung matagumpay ang pagpatakbo ng getCurrentPosition(), ibabalik sa function na nakalista sa argumento ng showPosition() ang isang object na coordinates
  • Ang function na showPosition() ay kumakakuha at ipinapakita ang latitude at longitude

Ang halimbawa na ito ay isang napakababasang script ng geolocation, na walang pagtanggap ng error.

Pagtanggap ng error at pagtanggap ng pagtanggol

Ang ikalawang argumento ng method na getCurrentPosition() ay ginagamit para sa pagtanggap ng error. Ito ay nagtutukoy sa function na dapat lumabas kapag nabigo ang pagkuha ng lokasyon ng user:

实例

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Nakabawal ng user ang kahilingan para sa Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Lokasyon na impormasyon ay hindi magagamit."
      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;
    }
  }

亲自试一试

Error code:

  • Permission denied - User does not allow geolocation
  • Position unavailable - Cannot obtain current location
  • Timeout - Operation timed out

Display Results on Map

To display the results on a map, you need to access a map service that can use latitude and longitude, such as Google Maps or Baidu Maps:

实例

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

亲自试一试

In the example above, we use the returned latitude and longitude data to display the location on Google Maps (using a static image).

Google Maps Script

The above link shows you how to use a script to display an interactive map with options for markers, zoom, and drag.

Information about a given location

This page demonstrates how to display the user's location on a map. However, geolocation is also very useful for information about a given location.

Example:

  • Update local information
  • Display points of interest around the user
  • Interactive Vehicle Navigation System (GPS)

getCurrentPosition() Method - Return Data

If successful, the getCurrentPosition() method returns an object. It always returns latitude, longitude, and accuracy attributes. If available, it will return other attributes below.

Attribute Description
coords.latitude Decimal degree latitude
coords.longitude Decimal degree longitude
coords.accuracy Location accuracy
coords.altitude Altitude, measured in meters above sea level
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

实例

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

亲自试一试