HTML5 Geolocation

HTML5 Geolocation

HTML5 Geolocation is used to locate the user's location.


Locate the user's location

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

Given that this feature may violate user privacy, user location information is not available unless the user agrees.


Browser support

8.jpg


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

Note: Geolocation is only available for devices with GPS , such as iPhone, geolocation is more precise.


HTML5 - Using Geolocation

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

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

    php中文网(php.cn) 

点击按钮获取您当前坐标(可能需要比较长的时间获取):

Run the program and try it


Example analysis :

Detect whether geolocation is supported

If supported, run the getCurrentPosition() method. If not supported, 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 the longitude and latitude

The above example is a very Basic geolocation script without error handling.


Handling errors and rejections

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

    php中文网(php.cn) 

点击按钮获取您当前坐标(可能需要比较长的时间获取):

Run the program to try it


Error code:

Permission denied - Geolocation not allowed for user

Position unavailable - Unable to get current location

Timeout - Operation timed out


Show results in map

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

    php中文网(php.cn) 

点击按钮获取您当前坐标(可能需要比较长的时间获取):

Run the program to try it

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


Example

How to use a Google Maps script to display an interactive map with markers, zoom and drag options.

    php中文网(php.cn) 

点击按钮获取您当前坐标(可能需要比较长的时间获取):

Run the program to try it


Given location Information

This page demonstrates how to display the user's location on the map. However, geolocation is also 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 the object. The latitude, longitude, and accuracy properties are always returned. If available, the other following properties are returned.

Attributes Description
coords.latitude Latitude as a decimal number
coords.longitude Longitude as a decimal number
coords.accuracy Position accuracy
coords.altitude Altitude, measured in meters above sea level
##coords.heading Direction, from the positive direction North start in degrees coords.speed Speed in meters per second timestamp Date/time of response
coords.altitudeAccuracy Altitude accuracy of the location

Geolocation object

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

clearWatch() - Stop watchPosition() method

The following example shows the watchPosition() method. You will need an accurate GPS device to test this example (like an iPhone):

    php中文网(php.cn) 

点击按钮获取您当前坐标(可能需要比较长的时间获取):



Continuing Learning
||
php中文网(php.cn)

点击按钮获取您当前坐标(可能需要比较长的时间获取):

submit Reset Code
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!