Use Geolocation in HTML5 to obtain the geographical location and call the Google Map API to locate on Google Map_html5 tutorial skills

This side dish just started learning HTML5, and now I am very interested in Geolocation. I combined it with the API of Google Map to realize the basic map positioning function.
1. Get the current geographical location
Call the method void getCurrentPosition(onSuccess, onError, options);.
Among them, onSuccess is the callback function executed when the current location information is successfully obtained, onError is the callback function executed when the current location information fails to be obtained, and options is some optional familiar lists. The second and third parameters are optional attributes.
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 attributes:
•latitude: the latitude of the current geographical location.
•longitude: The longitude of the current geographical location.
•altitude: the altitude of the current location (null if it cannot be obtained).
•accuracy: The accuracy of the obtained latitude and longitude (in meters).
•altitudeAccurancy: The longitude of the obtained altitude (in meters).
•heading: The forward direction of the device. Represented by the clockwise rotation angle facing the direction of the object (null if it cannot be obtained).
•speed: The forward speed of the device (in meters/second, null if it cannot be obtained).
•timestamp: The time when the geographical location information was obtained.

In the onError callback function, the error parameter is used. It has the following attributes:
•code: error code, with the following values.
1. The user rejected the location service (attribute value is 1);
2. Unable to obtain location information (attribute value is 2);
3. Timeout error in obtaining information (attribute value is 3).
•message: String containing specific error information.

In the options parameter, the optional attributes are as follows:
•enableHighAccuracy: Whether to require high-precision geographical location information.
•timeout: Set the timeout (unit: milliseconds).
•maximumAge: Valid time for caching geographical location information (unit: milliseconds).
Be sure to write the following code to determine whether the browser supports HTML5 to obtain geographical location information, so as to be compatible with earlier browsers that do not support it.

Copy code

The code is as follows:

if (navigator.geolocation) {
//Get the current geographical location information
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
} else {
alert("Your browser does not support HTML5 to obtain geographical location information." ; As shown below.

Copy code


The code is as follows:

Secondly, set the map parameters and setting method As shown below.

Copy code


The code is as follows:

//Specify a coordinate on Google Maps point, specify the abscissa and ordinate of the coordinate point at the same time var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); var myOptions = { zoom: 14, / /Set the magnification factor

center: latlng, //Set the map center point to the specified coordinate point

mapTypeId: google.maps.MapTypeId.ROADMAP //Specify the map type

};


Finally, create the map and display it on the page. The creation method is as follows

Copy code


The code is as follows:

//Create a map and display it in the page mapvar map = new google.maps.Map(document.getElementById("map"), myOptions);

Finally, I present all the codes for this example. The code is shown below.

Copy code


The code is as follows:

< ;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">