Comment: This side dish just started learning HTML5, and is now quite interested in Geolocation. The basic map positioning function is implemented in combination with Google Map API. The following steps are mainly used: obtain the current geographical location, and call the Google Map API to obtain the current location information.
This side dish just started learning HTML5, and is now quite interested in Geolocation, and combines Google Map's API to implement basic map positioning functions.1. Get the current geographical location
Call the method void getCurrentPosition(onSuccess, onError, options);
where onSuccess is a callback function executed when the current location information is successful, onError is a callback function executed when the current location information is failed, options are some optional familiar lists. The second and third parameters are optional attributes.
In the onSuccess callback function, the parameter position is used to represent a specific position object and represent the current position. It has the following properties:
•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 retrieved).
•accuracy: Accuracy (in meters) of the obtained latitude and longitude.
•altitudeAccurancy: The longitude (in meters) of the obtained altitude.
•heading: The direction of the device. It is represented by a clockwise rotation angle facing the forward direction (null if it cannot be retrieved).
•speed: The forward speed of the device (in meters/second, null if it cannot be retrieved).
•timestamp: The time when you get geolocation information.
In the onError callback function, the error parameter is used. It has the following properties:
•code: Error code, with the following value.
1. The user rejected the location service (the attribute value is 1);
2. The location information cannot be obtained (the attribute value is 2);
3. Obtain information timeout error (property value is 3).
•message: string, containing specific error information.
In the options parameter, the optional properties are as follows:
•enableHighAccuracy: Whether high-precision geolocation information is required.
•timeout: Set the timeout time (in milliseconds).
•maximumAge: The valid time (in milliseconds) for cache geolocation information.
Note that you need to write the following code to determine whether the browser supports HTML5 to obtain geographical location information, so as to be compatible with browsers that were not supported earlier.
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 geolocation information.");
}
2. Call Google Map API to get current location information
First, you need to reference the script file of Google Map API in the page. The import method is as follows.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Secondly, set the map parameters, and the setting method is as follows.
//Specify a coordinate point on Google map, and also specify the horizontal and vertical coordinates of the coordinate point.
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //Set the magnification
center: latlng, //Set the center point of the map to the specified coordinate point
mapTypeId: google.maps.MapTypeId.ROADMAP //Specify map type
};
Finally, create a map and display it in the page, the creation method is as follows
//Create a map and display it in the page map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
At the end, all the codes for this example are presented. The code is shown below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get the current location and display it on Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
if (navigator.geolocation) {
//Get the current geographical location
navigator.geolocation.getCurrentPosition(function (position) {
var coords = position.coords;
//console.log(position);
//Specify a coordinate point on Google map, and also specify the horizontal and vertical coordinates of the coordinate point.
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 14, //Set the magnification
center: latlng, //Set the center point of the map to the specified coordinate point
mapTypeId: google.maps.MapTypeId.ROADMAP //Specify map type
};
//Create a map and display it in the page map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
//Create marks on the map
var marker = new google.maps.Marker({
position: latlng, //Click out the coordinates set above
map: map //Set this annotation in the map you just created
});
//Tag prompt window
var infoWindow = new google.maps.InfoWindow({
content: "Current location:<br/>Long:" + latlng.lat() + "<br/>Dimension:" + latlng.lng() //Prompt message in the prompt form
});
//Open the prompt window
infoWindow.open(map, marker);
},
function (error) {
//Processing error
switch (error.code) {
case 1:
alert("Location service denied.");
break;
case 2:
alert("Location information cannot be obtained for the time being.");
break;
case 3:
alert("Get information timeout.");
break;
default:
alert("Unknown error.");
break;
}
});
} else {
alert("Your browser does not support HTML5 to obtain geolocation information.");
}
}
</script>
</head>
<body>
<div></div>
</body>
</html>