Use Geolocation to obtain geographical location information

This time I will bring you the use of Geolocation to obtain geographical location information, and what are theprecautionsfor using Geolocation to obtain geographical location information. The following is a practical case, let's take a look.

Html5 provides an API for geographical location information to obtain the user's current location through the browser. Based on this feature, location-based service applications can be developed. Before obtaining geographical location information, the browser will first ask the user if they are willing to share their location information, and it can only be used after the user agrees.

Html5 obtains geographical location information through the Geolocation API, using its getCurrentPositionmethod. There are three parameters in this method, which are executed when the geographical location information is successfully obtainedCallback function, the callback function and optional attribute configuration items executed when failure occurs.

The following Demo demonstrates obtaining geographical location information through Geolocation and displaying the current location on Baidu Map (by calling Baidu Map API). The experimental results show that the location is located at the entrance of Huandong 4th Road in the university town. The deviation from my location (HuaGong student dormitory) is still a bit large, reaching about 200-300 meters.

The code is as follows (convertor.js is the coordinate conversion file provided by Baidu Maps):

convertor.js file:

(function() { // 闭包 function load_script(xyUrl, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; // 借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = function() { if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { callback && callback(); // Handle memory leak in IE script.onload = script.onreadystatechange = null; if (head && script.parentNode) { head.removeChild(script); } } }; // Use insertBefore instead of appendChild to circumvent an IE6 bug. head.insertBefore(script, head.firstChild); } function translate(point, type, callback) { var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; // 动态创建script标签 load_script(xyUrl); BMap.Convertor[callbackName] = function(xyResult) { delete BMap.Convertor[callbackName]; // 调用完需要删除改函数 var point = new BMap.Point(xyResult.x, xyResult.y); callback && callback(point); } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; })();

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of paging query

Detailed explanation of the use of foldable panels in JS

The above is the detailed content of Use Geolocation to obtain geographical location information. For more information, please follow other related articles on the PHP Chinese website!