Get geographic location information using HTML5

How to use HTML5 geolocation

For example, geoml5 supports more precise location functions on modern handheld devices, especially HTML5. First, we need to check whether the user's device browser supports geographic positioning, and if so, obtain geographic information. Note that this feature may infringe the user's privacy. Unless the user agrees, the user's location information is unavailable, so we will prompt whether to allow geolocation when accessing the application. Of course, we can choose to allow it.

function getLocation(){
　　if (navigator.geolocation){
　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　}else{
　　alert(\\\"The browser does not support geolocation.\\\");
　　}
　　}

The above code can know that if the user equipment supports geolocation, run the getcurrentposition () method. If getCurrentPosition() runs successfully, a coordinates object is returned to the function specified in parameter showPosition. The second parameter showError of getCurrentPosition() method is used to handle errors, which specifies the function to run when obtaining user location fails.

Let's first look at the function showError(), which specifies some error code processing methods when obtaining the user's geographic location fails:

function showError(error){
　　switch(error.code) {
　　case error.PERMISSION_DENIED:
　　alert(\\\"seek failed,The user refused to request geolocation\\\");
　　break;
　　case error.POSITION_UNAVAILABLE:
　　alert(\\\"seek failed,Location information is not available\\\");
　　break;
　　case error.TIMEOUT:
　　alert(\\\"seek failed,Request to get user location timed out\\\");
　　break;
　　case error.UNKNOWN_ERROR:
　　alert(\\\"seek failed,Positioning system failure\\\");
　　break;
　　}
}

Let's take another look at the function showPosition(), and call coords' latitude and longitude to get the user's latitude and longitude.

function showPosition(position){
　　var lat = position.coords.latitude; //latitude
　　var lag = position.coords.longitude; //longitude
　　alert(\\\'latitude:\\\'+lat+\\\',longitude:\\\'+lag);
　　}

Use Baidu map and Google map interface to obtain user address

Above, we learned that the Geolocation of HTML5 can obtain the longitude and latitude of users, so what we need to do is to convert the abstract longitude and latitude into readable and meaningful real user geographic location information. Fortunately, baidu maps and Google maps provide this interface. We only need to transfer the longitude and latitude information obtained by HTML5 to the map interface, and the user's geographical location will be returned, including provincial and urban information, and even detailed geographical location information such as street and house number.

We first define the div to display the geographical location on the page and define id#baidu respectively_ Geo and id#google_geo. We just need to modify the key function showPosition(). Let's first look at the interaction of Baidu map interface. We send the longitude and latitude information to Baidu map interface through Ajax, and the interface will return the corresponding provincial and urban street information. Baidu map interface returns a string of JSON data. We can display the required information to div#baidu according to our needs_ geo. Note that the jQuery library is used here. You need to load the jQuery library file first.

function showPosition(position){
　　var latlon = 
position.coords.latitude+\\\',\\\'+position.coords.longitude;
　　//baidu
　　var url = 
\\\"http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=\\\"+latlon+\\\"&output=json&pois=0\\\";
　　$.ajax({
　　type: \\\"GET\\\",
　　dataType: \\\"jsonp\\\",
　　url: url,
　　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 \ \ \ ");
　　}
　　});
　　});

Let's look at Google Maps interface interaction. Similarly, we send the longitude and latitude information to the Google map interface through Ajax, and the interface will return the corresponding provincial, urban and street details. The Google map interface also returns a string of JSON data, which is more detailed than that returned by Baidu map interface. We can display the required information to div#google according to our needs_ geo.

function showPosition(position){
　　var latlon = position.coords.latitude+\\\',\\\'+position.coords.longitude;
　　//google
　　var url = 
\\\'http://maps.google.cn/maps/api/geocode/json?latlng=\\\'+latlon+\\\'&language=CN\\\';
　　$.ajax({
　　type: \\\"GET\\\",
　　url: url,
　　beforeSend: function(){
　　$(\\\"#google_geo\").html(\ \ \ 'locating... \ \ \';
　　},
　　success: function (json) {
　　if(json.status==\\\'OK\\\'){
　　var results = json.results;
　　$.each(results,function(index,array){
　　if(index==0){
　　$(\\\"#google_geo\\\").html(array[\\\'formatted_address\\\']);
　　}
　　});
　　}
　　},
　　error: function (XMLHttpRequest, textStatus, errorThrown) {
　　$(\\\"#google_geo\").html(latlon + \ \" address location acquisition failed \ \ \ ");
　　}
　　}); 
　}

The above code integrates Baidu map interface and Google map interface into the function showPosition(), which can be called according to the actual situation. Of course, this is just a simple application. We can develop many complex applications according to this simple example

last

The space is limited. The front-end preliminary notes, learning roadmap and front-end interview questions in the article are OK Click here for free Full PDF (including answer analysis).

The content outline of the selected front-end interview questions in 2021 includes HTML, CSS, JavaScript, jQuery, browser, HTTP, React and applet

The content outline of the selected front-end interview questions in 2021 includes HTML, CSS, JavaScript, jQuery, browser, HTTP, React and applet**

[external chain picture transferring... (img-WGGxWFiA-1626950504706)]