Home > Web Front-end > H5 Tutorial > Simple html5 code to obtain geographical location_html5 tutorial skills

Simple html5 code to obtain geographical location_html5 tutorial skills

WBOY
Release: 2016-05-16 15:48:18
Original
1403 people have browsed it


Copy code
The code is as follows:

/**
* The following is the html5 code to obtain the geographical location
*/
function getLocation() {
//Check whether the browser supports geolocation acquisition
if (navigator.geolocation) {
//If it supports geolocation acquisition, successfully call showPosition(), Failed to call showError
// alert("Trying to get location...");
var config = { enableHighAccuracy: true, timeout: 5000, maximumAge: 30000 };
navigator.geolocation.getCurrentPosition( showPosition, showError, config);
} else {
//alert("Geolocation is not supported by this browser.");
alert("Positioning failed, the user has disabled location acquisition permission");
}
}
/**
* Obtained address location successfully
*/
function showPosition(position) {
//Get the longitude and latitude
var x = position.coords.latitude;
var y = position.coords.longitude;
//Configure Baidu Geocoding API
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b"
"&callback=renderReverse"
"&location=" x "," y
"&output=json"
"&pois=0";
$.ajax({
type: "GET" ,
dataType: "jsonp",
url: url,
success: function (json) {
if (json == null || typeof (json) == "undefined") {
return;
}
if (json.status != "0") {
return;
}
setAddress(json.result.addressComponent);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("[x:" x ",y:" y "]Failed to obtain the address location, please select the address manually");
}
});
}
/**
* Failed to obtain address location [not processed yet]
*/
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert ("Positioning failed, the user denied the request for geolocation");
//x.innerHTML = "User denied the request for Geolocation.[The user denied the request for geolocation]"
break;
case error.POSITION_UNAVAILABLE :
alert("Location failed, location information is unavailable");
//x.innerHTML = "Location information is unavailable.[Location information is unavailable]"
break;
case error.TIMEOUT:
alert("Positioning failed, request to get user location timed out");
//x.innerHTML = "The request to get user location timed out.[Request to get user location timed out.]"
break;
case error.UNKNOWN_ERROR:
alert("Positioning failed, positioning system failed");
//x.innerHTML = "An unknown error occurred.[Unknown error]"
break ;
}
}
/**
* Set address
*/
function setAddress(json) {
var position = document.getElementById("txtPosition");
//Province
var province = json.province;
//City
var city = json.city;
//District
var district = json.district;
province = province.replace ('city', '');
position.value = province "," city "," district;
position.style.color = 'black';
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template