HTML5 Geolocation

HTML5 Geolocation（地理定位）用于定位用户的位置。

亲自试一试：在谷歌地图上显示您的位置

定位用户的位置

HTML5 Geolocation API 用于获取用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注释：对于拥有 GPS 的设备，如 iPhone，地理定位更加精确。

HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获取用户的位置。

以下是一个简单的地理定位示例，可以返回用户位置的经度和纬度。

Example

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

Try It Yourself

例子解释：

  • 检测是否支持地理定位
  • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
  • showPosition() 函数获取并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本，不包含错误处理。

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：

Example

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝了地理位置请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息不可用。"
      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;
    }
  }

Try It Yourself

Error code:

  • Permission denied - User does not allow geolocation
  • Position unavailable - Unable to 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:

Example

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

Try It Yourself

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 Altitude accuracy of the location
coords.heading Direction, measured in degrees from true north
coords.speed Speed, measured in meters per second
timestamp Response Date/Time

Geolocation Object - Other Interesting Methods

watchPosition() - Returns the user's current location and continues to return the updated location as the user moves (like GPS on a car).

clearWatch() - Stop the watchPosition() method

The following example demonstrates the watchPosition() method. You need a precise GPS device to test this example (such as iPhone):

Example

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

Try It Yourself