Get geolocation information via Window.navigator object and show on Baidu map

Source: Internet
Author: User

Obtaining geolocation information from Window.navigator objects

    • Geolocation API: Users can share geographic locations and enjoy location-aware services with the help of a web app (Location-aware service)
Window.navigator under the geolocationObject thatGetCurrentPositionmethod to get the current position.GetCurrentPositionMethod will initiate an asynchronous request for location information and will return immediately. If the request completes successfully, the successful callback used to implement the location data reception is called.

The following shows how to call getcurrentposition and use callbacks to process incoming location data. Where Successcallback is the callback function

var nav = null; function Requestposition () {  if (nav = = null) {      nav = window.navigator;  }  if (nav! = null) {      var geoloc = nav.geolocation;      if (geoloc! = null) {          geoloc.getcurrentposition (successcallback);      }      else {          alert ("Geolocation not Supported");      }  }  else {      alert ("Navigator not Found");}  } function Successcallback (position) {
</pre><pre name= "Code" class= "JavaScript";}

callback functionSuccesscallbackAccept an object parameter position, which represents the current geographic location,it has the following properties:latitude--latitude longitude--Longitude accuracy--accuracy, Unit meter altitude--height, unit meter altitudeaccuracy--height precision, Unit meter heading-movement direction, speed--the velocity of motion relative to the north direction (assuming you are moving on the horizon), the unit m/s callback function Handlelocationerror accept the Error object, Error.code is the following error number. Unknown_error (Error code 0)--errors are not in three of the following, you can use Error.message to get error details. Permission_denied (Error code 1)--user chooses not to share location position_unavailable (Error code 2)--Cannot get current location timeout (error code 3)--at specified time Failure to get a location triggers this error. The third parameter options is an optional parameter with the following properties: enablehighaccuracy--instructs the browser to obtain a high-precision position, which defaults to false. When turned on, it may not have any effect, or it may make the browser take longer to get more accurate location data. timeout--Specifies the time-out for obtaining a geographic location, which is not limited by default. The unit is in milliseconds. maximumage--the maximum validity period, this parameter specifies how often to get the location again when the location is repeatedly acquired. The default is 0, which means the browser needs to recalculate the location immediately.
The following shows how to call the Baidu API to display the current location based on geolocation information

First access Baidu API and then the callback function to write:

function Successcallback (position) {    SetText (position.coords.latitude, "latitude");    SetText (Position.coords.longitude, "longitude");    var map = new Bmap.map ("container");          Create a Map instance      var point = new Bmap.point (position.coords.longitude, position.coords.latitude);  Create point coordinates      map.centerandzoom (points);                 Initialize the map, set the center point coordinates and map level     Map.addcontrol (New Bmap.navigationcontrol ());   Add Pan Zoom control     Map.addcontrol (New Bmap.scalecontrol ());    Add the scale bar control    Map.addcontrol (New Bmap.overviewmapcontrol ());//Add the thumbnail map control     var marker = new Bmap.marker (point);        Create callout         map.addoverlay (marker);                     Add a callout to a map}

Then the problem came and found that the positioning was biased against the actual position. A look, the original is this:

Why is Baidu coordinates offset?

The international latitude and longitude coordinates standard is WGS-84, the domestic must use at least the GCJ-02 which the National Survey Bureau formulates, the geographical location carries on the first encryption. Baidu coordinates on this basis, carried out the BD-09 two times encryption measures, more protection of personal privacy. The coordinate system of Baidu external interface is not the true latitude and longitude of GPs acquisition, and it needs to be transformed by coordinate transformation interface.

How to move from the coordinates of other systems to Baidu coordinates?

The developer can convert using the coordinate transformation interface. Development users of the JavaScript API, Android SDK, and IOS SDK can directly invoke the appropriate method for conversion.


Before using the conversion excuse must remember to reference it to convert the JS file

<script type= "Text/javascript" src= "Http://developer.baidu.com/map/jsdemo/demo/convertor.js" ></script >

The converted callback function:

function Successcallback (position) {    SetText (position.coords.latitude, "latitude");    SetText (Position.coords.longitude, "longitude");    var map = new Bmap.map ("container");          Create a Map instance      var point = new Bmap.point (position.coords.longitude, position.coords.latitude);  Create point coordinates      map.centerandzoom (points);                 Initialize the map, set the center point coordinates and map level     Map.addcontrol (New Bmap.navigationcontrol ());   Add Pan Zoom control     Map.addcontrol (New Bmap.scalecontrol ());    Add a scale bar control    Map.addcontrol (New Bmap.overviewmapcontrol ());//Add a thumbnail map control    translatecallback = function (point) {        var marker = new Bmap.marker (point);//Create Callout          map.addoverlay (marker);//Add callout to map        map.setcenter (point) ;    }    BMap.Convertor.translate (point,0,translatecallback);     True latitude and longitude turn into Baidu coordinates}


Get geo-location information via Window.navigator object and display on Baidu map

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.