HTML5 geolocation Get location information (GO)

Source: Internet
Author: User
Tags script tag

HTML5 provides geo-location information in the API, through the browser to get the user's current location. Based on this feature, location-based service applications can be developed. Before obtaining geolocation information, the browser will first ask the user if they would like to share their location information before they can use it until the user consents.

HTML5 Obtaining geolocation information is provided through the Geolocation API, using its GetCurrentPosition method, which has three parameters, namely the callback function that was executed when the location information was successfully obtained, the callback function that was executed when the failure occurred, and an optional property configuration item.

The following demo shows the location information via geolocation and shows the current location on the Baidu map (by calling the Baidu Map API). The experimental results found that the location was located in the University city inner ring East Four road entrance, and my location (Chinese students dormitory) deviation is still a bit large, reaching about 200-300 meters.

The code is shown below (where convertor.js is the coordinate conversion file provided by Baidu map):

 1 <! DOCTYPE html> 2 

Convertor.js file:

 1 (function () {//Closure 2 function Load_script (Xyurl, callback) {3 var head = document.getElementsByTagName (' H EAD ') [0]; 4 var script = document.createelement (' script '); 5 Script.type = ' Text/javascript '; 6 script.src = Xyurl; 7//Draw on jquery's script cross-domain method 8 script.onload = Script.onreadystatechange = function () {9 if ((!t His.readystate | | This.readystate = = = "Loaded" | | This.readystate = = = "complete") {callback && callback ();//Handle memory Le AK in IE12 script.onload = Script.onreadystatechange = null;13 if (head && script). ParentNode) {head.removechild (script), 15}16}17};18/ /use InsertBefore instead of appendchild to circumvent an IE6 bug.19 head.insertbefore (script, head.firstchild); 2 0}21 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=" + Type24 + "&to=4&amp ; x= "+ point.lng +" &y= "+ Point.lat25 +" &callback=bmap.convertor. "+ callbackname;26// Dynamically create a Script tag load_script (xyurl), bmap.convertor[callbackname] = function (Xyresult) {. del Ete Bmap.convertor[callbackname]; You need to delete the modified function at the end of the call. var point = new Bmap.point (xyresult.x, XYRESULT.Y); callback && callback (point),}33}34 window. BMap = window. BMap | | {};36 Bmap.convertor = {};37 BMap.Convertor.translate = translate;38}) ();

HTML5 geolocation Get geo-location information (GO)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.