The best HTML5 geopositioning Tutorial In 2024, In this tutorial you can learn Locate the user's position,Browser Support,HTML5 - Use geo-targeting,Examples,Handling Errors and rejected,Examples,Display results in map,Examples,To the information given location,getCurrentPosition () method - return data,Geolocation object - other interesting methods,Examples,
HTML5 Geolocation (geopositioning) used to locate the user's location.
HTML5 Geolocation API to get the user's location.
In view of this feature may violate the privacy of users, unless the user agrees otherwise, the user location information is not available.
Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation (geographical location).
Note: Geolocation (geopositioning) For devices with GPS, such as iPhone, geopositioning more accurate.
Use getCurrentPosition () method to get the user's location.
The following example is a simple geolocation instance, the user can return to the location latitude and longitude:
Analysis examples:
The above example is a very basic geopositioning script, error-free handling.
The second parameter getCurrentPosition () method for handling errors. It specifies when the get function to run when the user's location failed:
error code:
To display the results in a map, you need to access can use the latitude and longitude of map services, such as Google Maps or Baidu map:
In the above example, we use latitude and longitude data returned by the display position (using static images) on Google Maps.
Google Maps script
The above link shows you how to use a script to display an interactive map with a marker, zoom and drag options.
This page demonstrates how to display the user's location on a map. However geolocation information for a given location is also very useful.
Example:
T if successful, getCurrentPosition () method returns an object. Always returns latitude, longitude and accuracy properties. If available, the following additional property is returned.
属性 | 描述 |
---|---|
coords.latitude | 十进制数的纬度 |
coords.longitude | 十进制数的经度 |
coords.accuracy | 位置精度 |
coords.altitude | 海拔,海平面以上以米计 |
coords.altitudeAccuracy | 位置的海拔精度 |
coords.heading | 方向,从正北开始以度计 |
coords.speed | 速度,以米/每秒计 |
timestamp | 响应的日期/时间 |
watchPosition () - Returns the user's current location, and continue to return the updated position (like GPS on a car) when the user moves.
clearWatch () - Stop watchPosition () method
The following example shows watchPosition () method. You need an accurate GPS device to test the cases (such as iPhone):