Html5 Geolocation instance for obtaining geographic location information, html5geolocation

Html5 Geolocation instance for obtaining geographic location information, html5geolocation

Html5 provides an API for obtaining the current location of a user through a browser. Based on this feature, you can develop location-based service applications. Before obtaining the geographic location information, the browser will first ask the user if they are willing to share their location information, which can be used only after the user's consent.

Html5 uses the getCurrentPosition method provided by the Geolocation API to obtain geographic location information. This method has three parameters: the callback function executed when the geographic location information is obtained successfully, the callback function and optional attribute configuration items that fail to be executed.

The following Demo demonstrates how to obtain geographic location information through Geolocation and display the current location on Baidu map (by calling Baidu map API ). The experiment results showed that the location was located at the entrance of the Four Steps around the east in the university city. The deviation from my location (huagong Student Dormitory) was still a little large, about-meters.

The Code is as follows (convertor. js provides the coordinate conversion file for Baidu map ):

<! DOCTYPE html> 
Convertor. js file:
(Function () {// closure function load_script (xyUrl, callback) {var head = document. getElementsByTagName ('head') [0]; var script = document. createElement ('script'); script. type = 'text/javascript '; script. src = xyUrl; // reference jQuery's script cross-origin method 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); // random function name var xyUrl =" http://api.map.baidu.com/ag/coord/convert?from= "+ Type +" & to = 4 & x = "+ point. lng + "& y =" + point. lat + "& callback = BMap. convertor. "+ callbackName; // dynamically create the script tag load_script (xyUrl); BMap. convertor [callbackName] = function (xyResult) {delete BMap. convertor [callbackName]; // Delete the changed function var point = new BMap after calling. point (xyResult. x, xyResult. y); callback & callback (point) ;}} window. BMap = window. BMap | {}; BMap. convertor ={}; BMap. convertor. translate = translate ;})();
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.