HTML5 provides the API of geographical location information, and obtains the user's current location through the browser. Based on this feature, you can develop position -based service applications. Before obtaining geographical location information, first browser will ask users if they are willing to share their location information, and they can only use it after the user's consent.
HTML5 obtaining geographical location information is provided by the GEOLOCATION API, using its GetCurrentPosition method. There are three parameters in this method. item.
The following DEMO demonstrates the geographical location information through Geology and displays the current position on Baidu Map (by calling Baidu Map API). The experimental results found that the location was positioned at the entrance of the east road in the university town. The deviation from the location of the location (the student's student dormitory) was still a bit large, reaching about 200-300 meters.
The code is shown below (where the coordinate conversion file provided by Convertor.js for Baidu Map):
<! Doctype html> <html> <head> <Title> H5 Geographical location Demo </Title> <script SRC = http://api.map.baidu.com/api? V = 1.3 Type = Text/JavaScript> < /script> <script type = text/javascript src = convertor.js> </head> </head> <body> Map style = widthle: 600px; 400px> </div> </bo dy> <script type = Text/Javascript> If (Window.navigator.Geolocation) {var Options = {EnableHighacuracy: true,}; CurrenTPOSITION (handlesuccess, handlerror, options);} else {alert (browser not Support html5 to get geographical location information);} Function handlesuccess (posity) {// Get the current position latitude and longitude. This case is that chrome browser is obtained by the latitude and latitude in Google Maps var lng = position.longitude; VAR LAT = Positation.coords.latitude; // Call the Baidu Map API display var map = new bmap.map (map); var ggpoint = new bmap.point (lng, lat); The latitude and longitude of the latitude BMAP.CONVERTORTORTORTRANSATE (ggpoint, 2, function (point) {var Marker = New Bmap.marker (Point); Map.addoverLay (Marker); Map.Centerandzoom (point, 15);}) ;} Function Handlerror (Error) {} </script> </html>convertor.js file:
(FUNCTION () {// Closure function load_script (xyurl, callback) {var head = document.GetelementsbytagName ('head') [0]; eelement ('script'); script.type = 'text /javascript '; script.src = xyurl; // borrowed from jQuery's script cross -domain method script.onload = script.onreadyStateChaange = Function () {if (! This.readyState || T His.readyState === loaded || This.readyState == Complete) {Callback && Callback (); // Handle Memory Leak in IE Script.onload = script.onreadyStateChange = NULL; Head && Scri. pt.parentnode) {head.removechild (script);} }}; // Use InsertBeFore Instead of Appendchild to Circumvent An IE6 BUG. Head.InsertBeFore (Script, Head.firstChild); e, callback) {var callbackname = 'cbk_' + math.round (math .random () * 10000); // The 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; // Dynamic creation of Script label load_script (xyurl); Result) {delete bmap.convertor [callbackName]; // Delete the change function var point = new bmap.point (xyresult.x, xyresult.y); callback && callback (point);}}} Window.bmap = Window.bmap || {}; = {}; Bmap. Convertor.translate = translate;}) ();The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.