Raid on HTML5 Javascript API Extension 2—Geographical Information Services and Geolocation API Learning_html5 Tutorial Skills

One of the more popular types of services now is called location-based service (LBS). This type of service is the information that enterprises use to provide services in the area near the coordinates of a certain point (such as the user's location), such as common maps. Related Services. In HTML5, a new geolocation API is added to determine and share geolocation.
Privacy Statement
Privacy is a concern when sharing your physical location with a remote web server. Therefore, the Geolocation API requires users to provide permission before a web application can access location information. The first time you visit a web page that requests geolocation data, your browser will display a notification bar offering access to the user's location. Follow the browser prompts and select the relevant authorization.
Location information will not be provided to the web application if the user does not grant permission. Calling the relevant API will not trigger a success callback.
Check browser support
The geolocation API is supported in the latest versions of mainstream browsers, but for compatibility with older browsers, you still need to check. If the geolocation API is not available, window.navigator.geolocation will be null, as shown below:

Copy code

The code is as follows:

function show_islocationenabled()
{
var str = "No, geolocation is not supported.";
if (window.navigator.geolocation) {
str = "Yes, geolocation is supported.";
}
alert( str );
}

The Geolocation API is based on a new attribute of the navigator global object: navigator.geolocation, this object provides some useful information about the visitor's browser and system. Geolocation information can be obtained through many means: such as base stations, web databases, or GPS. The accuracy of Geolocation information obtained using different methods is also different. Usually, the accuracy obtained through GPS is the most accurate (GPS is used most on mobile platforms, and network data is basically used on PC platforms). Occasionally, at some locations, you may not get a clear geolocation reading or receive no data at all.
Locate the current position
Use the getCurrentPosition() method of navigator.geolocation to obtain the user's current location. This method only obtains the location information once. When this method is called by a script, the method asynchronously attempts to obtain the current location of the host device.

Copy code

The code is as follows:

Method signature: getCurrentPosition(geolocationSuccessCallback,[geolocationErrorCallback ,geolocationOptions]);
　1. geolocationSuccessCallback: The callback after successfully obtaining the current location (required)
　2. geolocationErrorCallback. The callback used when an error occurs (optional)
　3. geolocationOptions. Geography Position option (optional)

Processing position information
The getCurrentPositon() method will save the position information to a Position object after successfully obtaining the current position, and then execute this object as a parameter geolocationSuccessCallback this callback. In this callback function, you can do whatever you want with the information contained in this object.
Position object has two attributes: timestamp and coords. The timestamp attribute represents the creation time of the geographical location data, and the coords attribute represents the geographical location information, which contains seven attributes:

Copy code

The code is as follows:

. coords.latitude: estimated latitude
. coords.longitude: estimated longitude
. coords.altitude: estimated altitude
. coords.accuracy: all The accuracy of the provided longitude and latitude estimates in meters
. coords.altitudeAccuracy: The accuracy of the provided altitude estimates in meters
. coords.heading: The angular direction in which the host device is currently moving , calculated clockwise relative to true north
. coords.speed: The device's current ground speed in meters per second

Generally, three of these properties are guaranteed: coords.latitude, coords.longitude and coords.accuracy, and the rest return null; this depends on the capabilities of the device and the backend positioning server it uses. Furthermore, the heading and speed attributes can be calculated based on the user's previous location.
Handling errors
If an error occurs when executing the getCurrentPositon() method, the method passes a PositionError object to the geolocationErrorCallback callback.
Set geolocation options
You can set three properties of geolocationOptions:

Copy code

The code is as follows:

enableHighAccuracy: If the device supports high accuracy, this option indicates whether to enable high accuracy.
timeout: Query timeout
maximumAge: The maximum time for the cached location, during which the cache can be used.

Look at the complete example below:

Copy the code

The code is as follows:

Click the button to get your position:
Try It

<script> <br>var x=document.getElementById("demo"); <br>function getLocation() { <br>if (navigator.geolocation){ <br>navigator.geolocation.getCurrentPosition(showPosition,showError); <br>} <br>else{ <br>x.innerHTML="Geolocation is not supported by this browser."; <br>} <br>} <br>function showPosition(position) { <br>var latlon=position.coords.latitude "," position.coords.longitude; <br>var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" <br>latlon "&zoom=9&size=400x300&sensor=false"; <br>document.getElementById("mapholder").innerHTML="<img src='" img_url "' />"; <br>} <br>function showError(error) { <br>switch(error.code ) { <br>case error.PERMISSION_DENIED: <br>x.innerHTML="User denied the request for Geolocation." <br>break; <br>case error.POSITION_UNAVAILABLE: <br>x.innerHTML="Location information is unavailable." <br>break; <br>case error.TIMEOUT: <br>x.innerHTML="The request to get user location timed out." <br>break; <br>case error.UNKNOWN_ERROR: <br> x.innerHTML="An unknown error occurred." <br>break; <br>} <br>} <br></script>

This example obtains the geographical location of the current device and displays it in Google Maps. Of course, you can use the static plate in Baidu Map API to transform this example. For Baidu Map API, please refer to the link in the Practical Reference later.
Enable/cancel continuous positioning
Use the watchPosition() method of navigator.geolocation to periodically poll the user's location to see if the user's location has changed. This method has three parameters: these three parameters are the same as the getCurrentPosition() method, a callback after success, a callback after failure, and an option to obtain position information; this method has a return value watchID, which is used to cancel continuous positioning .
Use the clearWatch() method of navigator.geolocation to terminate the ongoing watchPosition(). This method only takes one parameter watchID.
Look at the example below:

Copy the code

The code is as follows:

Latitude:

Longitude:

实用参考：
官方文档：http://www.w3schools.com/html5/html5_geolocation.asp
脚本之家：http://www.jb51.net/w3school/html5/
微软帮助：http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
百度地图API：http://dev.baidu.com/wiki/static/index.htm