H5 of 11__GeoLocation Geolocation-H5 Tutorial-php.cn

H5 of 11__GeoLocation Geolocation

黄舟

Release： 2017-02-18 14:54:19

Original

1733 people have browsed it

GeoLocation API is usually used for mobile devices to obtain geographical location. Strictly speaking, it does not belong to the standard specification of H5.

1 How to use GeoLocation API ?

To use this API, obtain access to geolocation through window.navigator.geolocatio. This object has the following three methods:

1. getCurrentPosition()

2. watchPosition()

3. clearWatch()

The getCurrentPosition() method can pass three parameters, as shown below:

void getCurrentPosition(PositionCallback successCallback, optional PositionErrorCallback errorCallback, optional PositionOptions options);

The first one The first parameter is a required parameter, and the last two are optional parameters.

Look at an example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>GeoLocation API 地理定位</title>
    <script type="text/javascript">
    	
   		
   		window.navigator.geolocation.getCurrentPosition(function(pos){
   			alert("当前地理位置的纬度： " +pos.coords.latitude
   			+"\n当前地理位置的经度： " +pos.coords.longitude
   			+ "\n当前经纬度的精度： " +pos.coords.accuracy
   			+ "\n设备的当前运动方向： " +pos.coords.heading
   			+ "\n设备的当前速度： " +pos.coords.speed
   			);
   			
   		});
   		
   		var watchID= window.navigator.geolocation.watchPosition(function(pos){
   			alert("当前位置变化的纬度： " +pos.coords.latitude
   			+"\n当前位置变化的经度： " +pos.coords.longitude
   			+ "\n当前经纬度变化的精度： " +pos.coords.accuracy
   			+ "\n设备的当前运动方向： " +pos.coords.heading
   			+ "\n设备的当前变化的速度： " +pos.coords.speed);
   			
   			navigator.geolocation.clearWatch(watchID);
   		}, function(){
   		});
    </script>
</head>
<body>
	
</body>
</html>

Copy after login

After calling getCurrentPosition() successfully, In the callback function, you can obtain the geographical location information of the current user when accessing the Web page through the parameter object.

#pos object contains a coords attribute. The coords attribute Represents a series of geographical coordinate information.

latitude: latitude (decimal)

longitude: longitude (decimal)

altitude: altitude

acuracy: the accuracy of latitude and longitude coordinates (in meters)

altitudeAccuracy: in meters The altitude coordinate accuracy level

heading: Direction of movement (specified by the angle of clockwise rotation relative to true north)

speed: current Ground speed (in m/s)

pos also contains a timestamp attribute, which is used to create a timestamp in milliseconds when returning the coords object.

The rendering is as follows: