Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to obtain geographic location information for HTML5. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

HTML5 provides geographic location function (Geolocation API), which can determine the location of users. We can use this feature of HTML5 to develop applications based on geographic location information. In this paper, combined with examples to share with you how to use HTML5, with the help of Baidu, Google Maps interface to obtain accurate geographical location information of users.

How to use HTML5 geolocation function

Location function (Geolocation) is a new feature of HTML5, so it can only be run on modern browsers that support HTML5, especially handheld devices such as iphone, where geolocation is more accurate. First of all, we need to check whether the user device browser supports geolocation, and if so, obtain geographic information. Note that this feature may invade the user's privacy. Unless the user agrees, the user's location information is not available, so when we access the application, we will be prompted whether to allow geolocation, of course we 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 shows that if the user device supports geolocation, run the getCurrentPosition () method. If getCurrentPosition () runs successfully, a coordinates object is returned to the function specified in the parameter showPosition, and the second parameter showError of the getCurrentPosition () method is used to handle the error, which specifies the function to run when it fails to get the user's location.

Let's first take a look at the function showError (), which specifies some error code handling when it fails to get the user's geographic location:

Function showError (error) {switch (error.code) {case error.PERMISSION_DENIED: alert ("location failed, user refused to request geolocation"); break; case error.POSITION_UNAVAILABLE: alert ("location failed, location information is not available"); break; case error.TIMEOUT: alert ("location failed, request for user location timed out"); break; case error.UNKNOWN_ERROR: alert ("location failed, location system failed"); break;}}

Let's take a look at the function showPosition (), and 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 Maps and Google Maps to obtain user addresses

We have learned that HTML5's Geolocation can obtain the user's latitude and longitude, so what we need to do is to convert the abstract latitude and longitude into readable and meaningful real user geographic location information. Fortunately, Baidu Maps and Google Maps provide this interface. We only need to transmit the longitude and latitude information obtained by HTML5 to the map interface, and we will return the user's geographical location, including provincial, municipal and regional information, and even detailed geographic location information such as street and house number.

We first define the p to display the geographic location on the page, defining id#baidu_geo and id#google_geo, respectively. We just need to modify the key function showPosition (). First, let's take a look at the Baidu map interface interaction. We will send the longitude and latitude information to the Baidu map interface through Ajax, and the interface will return the street information of the corresponding provinces, cities and regions. Baidu Map API returns a string of JSON data. We can show the information we need to p#baidu_geo according to our needs. Note that the jQuery library is used here, and 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 take a look at the 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 street details of the corresponding provinces, cities and regions. Google Maps API also returns a string of JSON data. These JSON data are more detailed than those returned by Baidu Map API. We can show the information we need to p#google_geo according to our needs.

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");}});})

This is the end of the article on "how to obtain geographic location information for HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.