Posts in current category

HTML5 geolocation


May 03, 2021 13:05 HTML5


Table of contents


HTML5 Geolocation (Geolocation).


HTML5 Geolocation (geolocation) is used to locate a user's location.

Geolocation requests a location information, and with the user's consent, the browser returns a location information that contains longhes and dimensions!


Locate the user's location

The HTML5 Geolocation API is used to obtain the user's geographic location.

Because this feature may violate a user's privacy, user location information is not available unless the user consents.


Browser support

HTML5 geolocation HTML5 geolocation HTML5 geolocation HTML5 geolocation HTML5 geolocation

Internet Explorer 9 Plus, Firefox, Chrome, Safari and Opera support Geolocation.

Note: Geolocation is more accurate for devices with GPS, such as the iPhone.


HTML5 - Use geolocation

Use the getCurrentPosition() method to get the user's location.

The following example is a simple geolocation instance that returns the longitude and latitude of the user's location:

<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>

Try it out . . .

Instance resolution:

  • Detect whether geolocation is supported
  • If supported, run the getCurrentPosition() method. If not, a message is displayed to the user.
  • If getCurrentPosition() runs successfully, a coordinates object is returned to the function specified in the parameter showPosition
  • The showPosition() function obtains and displays longitude and latitude

The example above is a very basic geolocation script that does not contain error handling.

Tip: Geolocation location sources can include GPS, IP address, RFID, WIFI and Bluetooth MAC address, as well as GSM/CDMS ID, and so on.


Handle errors and rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies the function that runs when the acquisition of the user's location fails:

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="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}

Try it out . . .

Error code:

  • Permission denied - Geolocation is not allowed by the user
  • Position unavailable - the current location could not be obtained
  • Timeout - The operation timed out

Show the results in the map

To display results in a map, you need access to a map service that uses longitude and latitude, 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+"'>";
}

Try it out . . .

In the example above, we use the returned longitude and latitude data to display the location in Google Maps (using still images).

Google Maps script
The links above show you how to use scripts to display interactive maps with tag, zoom, and drag options.


Information for a given location

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

Instance:

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

GetCurrentPosition() method - returns data

If T succeeds, the getCurrentPosition() method returns the object. T he latitude, longitude, and accuracy properties are always returned. If available, other properties below are returned.

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间


Geolocation objects - other interesting ways

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

clearWatch() - Stop watchPosition() method

The following example shows the watchPosition() method. Y ou need an accurate GPS device to test this example (e.g. iPhone):

<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>

Try it out . . .

We'll cover geolocation in HTML5, and we'll learn about HTML5 video in the next section!