Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use Geolocation in HTML5 to get geographic location calls, the article is very detailed, has a certain reference value, interested friends must read it!

1. Get the current geographic location

Call the method void getCurrentPosition (onSuccess, onError, options);.

OnSuccess is the callback function executed when the current location information is successfully obtained, onError is the callback function executed when it fails to obtain the current location information, and options is some optional familiar list. The second and third parameters are optional.

In the onSuccess callback function, the parameter position is used, which represents a specific position object and represents the current position. It has the following properties:

Latitude: the latitude of the current geographic location.

Longitude: longitude of the current geographic location.

Altitude: the altitude of the current location (null if it cannot be obtained).

Accuracy: the precision of latitude and longitude obtained (in meters).

AltitudeAccurancy: the longitude (in meters) of the altitude obtained.

Heading: the forward direction of the device. Expressed as a clockwise rotation of the face in the direction of the bead (null if it cannot be obtained).

Speed: the forward speed of the device (in meters per second, null if it cannot be obtained).

Timestamp: the time when geolocation information was obtained.

In the onError callback function, the error parameter is used. It has the following properties:

Code: error code, as shown below.

1. The user rejected the location service (attribute value is 1)

two。 Unable to get location information (attribute value is 2)

3. Error getting information timeout (property value 3).

Message: a string containing specific error messages.

In the options parameter, the optional attributes are as follows:

EnableHighAccuracy: whether high-precision geographic location information is required.

Timeout: sets the timeout (in milliseconds).

MaximumAge: the valid time in milliseconds for caching geolocation information.

Note that the following code should be written to determine whether the browser supports HTML5 to obtain geographic location information in order to be compatible with browsers that were not supported earlier.

If (navigator.geolocation) {

/ / get current geolocation information

Navigator.geolocation.getCurrentPosition (onSuccess, onError, options)

} else {

Alert ("your browser does not support HTML5 for geolocation information.")

}

two。 Call Google Map API to get the current location information

First, you need to reference Google Map API's script file in the page, as shown in the following import method.

Secondly, set the map parameters, as shown below.

The copy code is as follows: www.mb5u.com

/ / specify a coordinate point on a google map, and specify the Abscissa and ordinate of the coordinate point

Var latlng = new google.maps.LatLng (coords.latitude, coords.longitude)

Var myOptions = {

Zoom: 14, / / set magnification

Center: latlng, / / sets the center point of the map to the specified coordinate point

MapTypeId: google.maps.MapTypeId.ROADMAP / / specify the map type

}

Finally, create the map and display it on the page as follows

/ / create a map and display it in the page map

Var map = new google.maps.Map (document.getElementById ("map"), myOptions)

Finally, all the code for this example is presented. The code is as follows.

Get the current location and display it on the google map

Function init () {

If (navigator.geolocation) {

/ / get the current geographic location

Navigator.geolocation.getCurrentPosition (function (position) {

Var coords = position.coords

/ / console.log (position)

/ / specify a coordinate point on a google map, and specify the Abscissa and ordinate of the coordinate point

Var latlng = new google.maps.LatLng (coords.latitude, coords.longitude)

Var myOptions = {

Zoom: 14, / / set magnification

Center: latlng, / / sets the center point of the map to the specified coordinate point

MapTypeId: google.maps.MapTypeId.ROADMAP / / specify the map type

}

/ / create a map and display it in the page map

Var map = new google.maps.Map (document.getElementById ("map"), myOptions)

/ / create a tag on the map

Var marker = new google.maps.Marker ({

Position: latlng, / / Mark out the previously set coordinates

Map: map / / set the dimension in the map you just created

});

/ / Dimension prompt window

Var infoWindow = new google.maps.InfoWindow ({

Content: "current location: longitude:" + latlng.lat () + "Dimension:" + latlng.lng () / / prompt information in the prompt form

});

/ / Open the prompt window

InfoWindow.open (map, marker)

}

Function (error) {

/ / handling errors

Switch (error.code) {

Case 1:

Alert ("location service denied.")

Break

Case 2:

Alert ("location information is not available temporarily.")

Break

Case 3:

Alert ("timed out getting information.")

Break

Default:

Alert ("unknown error")

Break

}

});

} else {

Alert ("your browser does not support HTML5 for geolocation information.")

}

}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.