HTML5 how to use Baidu map to quickly locate latitude and longitude

Source: Internet
Author: User

The positioning function (geolocation) is a new feature of the HTML5, so it is more accurate to operate only on modern browsers that support HTML5, especially handheld devices such as the iphone. First we want to detect whether the user device browser supports geolocation, and if so, obtain geographic information. Note that this feature may violate the privacy of the user, unless the user agrees, the user location information is not available, so when we access the app will be prompted to allow geo-location, we certainly choose to allow.
function getLocation () {?
if (navigator.geolocation) {?
Navigator.geolocation.getCurrentPosition (showposition,showerror);?
}else{?
Alert ("The browser does not support geo-targeting. ");?
}?
}?
The above code knows that if the user device supports geolocation, run the GetCurrentPosition () method. If GetCurrentPosition () runs successfully, returns a coordinates object to the function specified in the parameter showposition, and the second parameter of the GetCurrentPosition () method showerror for handling errors , which specifies the function that runs when the user location fails to get.
Let's take a look at function showerror (), which specifies how some error code should be handled when a user's location fails:
function ShowError (error) {?
Switch (error.code) {?
Case error. Permission_denied:?
Alert ("Location failed, user refused to request geo-location");
break;?
Case error. Position_unavailable:?
Alert ("Location failed, position information is not available");?
break;?
Case error. TIMEOUT:?
Alert ("Location failed, request get user location timeout");?
break;?
Case error. Unknown_error:?
Alert ("Location failure, location system failure");?
break;?
}?
}?
Let's look at function showposition (), call Coords's latitude and longitude to get the latitude and longitude of the user.
function Showposition (position) {?
var lat = position.coords.latitude; Latitude?
var lag = Position.coords.longitude; Longitude?
Alert (' Latitude: ' +lat+ ', Longitude: ' +lag ');?
}?
Use Baidu Map
function Showposition (position) {?
var LatLon = position.coords.latitude+ ', ' +position.coords.longitude;?

Baidu?
var url = "<a href=" http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback= renderreverse&location= "+latlon+" &output=json&pois=0 ">http://api.map.baidu.com/geocoder/v2/?ak= c93b5178d7a8ebdb830b9b557abce78b&callback=renderreverse&location= "+latlon+" &output=json&pois=0 </a> ";?
$.ajax ({?
Type: "GET",?
DataType: "Jsonp",?
Url:url, huh?
Beforesend:function () {?
$ ("#baidu_geo"). html (' locating ... ');?
},?
Success:function (JSON) {?
if (json.status==0) {?
$ ("#baidu_geo"). HTML (json.result.formatted_address);?
}?
},?
Error:function (XMLHttpRequest, Textstatus, Errorthrown) {?
$ ("#baidu_geo"). HTML (latlon+ "address location acquisition failed");?
}?
});?
});?
Well now everyone already know how to use Baidu map to quickly locate latitude and longitude, if there is still no understanding of the place, you can leave a message to consult us. This article by the Professional Small program development company Brigitte Xuan Science and technology finishing release, if need reprint please indicate source!

HTML5 how to use Baidu map to quickly locate latitude and longitude

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.