HTML5 provides access to the geographical location of the API, it is convenient to determine the latitude and longitude of customers, we have access to latitude and longitude, you can provide the API through the Baidu map to determine the location of the user.
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> browser-based HTML5 Find Locations </title>
<!--Baidu API-->
<script src= "http://api.map.baidu.com/api?v=1.2" type= "Text/javascript" ></script>
<script>
function GetLocation () {
var options={
Enablehighaccuracy:true,
maximumage:1000
}
if (navigator.geolocation) {
Browser support geolocation
Navigator.geolocation.getCurrentPosition (onsuccess,onerror,options);
}else{
Browser does not support geolocation
Alert (' Your browser does not support geographic positioning ');
}
}
//Success
function onsuccess (position) {
//Back to User location
//Longitude
var longitude =position.coords.longitude;
//Latitude
var latitude = position.coords.latitude;
Alert (' Longitude ' +longitude+ ', Latitude ' +latitude);
According to latitude and longitude to obtain geographical location, not too accurate, access to urban areas is still possible
var map = new Bmap.map ("Allmap");
var point = new Bmap.point (longitude,latitude);
var gc = new Bmap.geocoder ();
Gc.getlocation (Point, Function (RS) {
var addcomp = rs.addresscomponents;
Alert (addcomp.province + "," + addcomp.city + "," + Addcomp.district + "," + Addcomp.street + "," + addcomp.streetnumb ER);
});
}
//Failure
function OnError (error) {
switch (error.code) {
Case 1:
Alert ("Location service denied");
break;
Case 2:
Alert ("Temporary access to location information");
Break
Case 3:
Alert ("Get information timed out");
Break
Case 4:
Alert ("Unknown error");
Break
}
}
Window.onload=getlocation;
</script>
<body>
</body>
At present, the computer is sometimes not available, the phone is still very good, in addition, to obtain the location is not very accurate, but used to obtain urban areas can be.
In fact, this is called the Baidu map +HTML5 to achieve, very good.
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
