Home > Developer > Web Develop
Browser supportThe Window.navigator object contains information about the visitor's browser, and the Window.navigator object can be written without using the window prefix.
Internet Explorer 9, Firefox, Chrome, Safari, and Opera support geo-targeting.
Note: geo-positioning is more accurate for devices with GPS, such as the IPhone
HTML5 Geo-positioning
HTML5 provides the Geolocation property for Window.navigator, which is used to obtain the current user's location based on the browser.
Window.navigator.geolocation provides 3 methods, namely
GetCurrentPosition watchposition Clearwatch (Watchid);//watchid returns the value for Watchcurrentposition//de-monitoring options = { Enablehighaccuracy,//boolean requires high-precision geographic information timeout,//Get information timeout limit maximumage//the time}//options to cache geo-information is not writable, as a default
use GetCurrentPosition () to get the user's location (actually gets the location of the browser that is used by the user):
<! DOCTYPE html>
<body>
<p id= "Demo" > Click this button to get your coordinates:</p>
<button onclick= "getLocation ()" > Try </button>
<script>
var X=document.getelementbyid ("demo");
function GetLocation () {
if (navigator.geolocation) {
Navigator.geolocation.getCurrentPosition (Showposition,showerror);
}
else{
X.innerhtml= "Geolocation is not supported by this browser.";
}
}
function Showposition (position) {
X.innerhtml= "Latitude:" + position.coords.latitude +
"<br/>longitude:" + position.coords.longitude;
}
function ShowError (Error) {
Switch (error.code) {
Case error. Permission_denied:
X.innerhtml= "User denied the request for geolocation."
Break
Case error. Position_unavailable:
X.innerhtml= "Location information is unavailable."
Break
Case error. TIMEOUT:
X.innerhtml= "The request to get a user location timed out."
Break
Case error. Unknown_error:
X.innerhtml= "An unknown error occurred."
Break
}
}
</script>
</body>
Google Maps app :
And the difference between the above is
function Showposition (position) { var latlon=position.coords.latitude+ "," +position.coords.longitude; var img_ Url= "http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+ "&zoom=14&size=400x300& Sensor=false "; document.getElementById ("Mapholder"). Innerhtml= " ';}
The following example shows the Watchposition () method:
<! DOCTYPE html>
<body>
<p id= "Demo" > Click this button to get your coordinates:</p>
<button onclick= "getLocation ()" > Try </button>
<script>
var X=document.getelementbyid ("demo");
function GetLocation () {
if (navigator.geolocation) {
Navigator.geolocation.watchPosition (showposition);
}
else{
X.innerhtml= "Geolocation is not supported by this browser.";
}
}
function Showposition (position) {
X.innerhtml= "Latitude:" + position.coords.latitude +
"<br/>longitude:" + position.coords.longitude;
}
</script>
</body>
HTML5 geolocation Geographical location
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
