Obtain the geographic location information through the window. navigator object and display it on Baidu map.

Source: Internet
Author: User

Obtain the geographic location information through the window. navigator object and display it on Baidu map.
Obtain geographic location information through the window. navigator object

  • Geolocation API: users can share geographic locations and enjoy location-aware services with the assistance of Web applications)
The getCurrentPosition method of the geolocation object under window. navigator can get the current position. The getCurrentPosition method initiates an asynchronous request for Location Information and returns the result immediately. If the request is successfully completed, a callback is called to receive the location data.

The following example shows how to call getCurrentPosition and Use callback to process the input location data. 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">}

The callback function successCallback accepts an object parameter position to indicate the current geographic location. It has the following attributes: latitude -- latitude longpolling -- longitude accuracy -- accuracy, in meters altitude -- height, unit meter altitudeAccuracy-precise height, unit meter heading-direction of motion, angle relative to North-speed of motion (Suppose you are moving on the horizon ), the callback function in meters/Seconds handleLocationError accepts the error object, error. the code is the following error code. UNKNOWN_ERROR (error code 0) -- the error is not in the following three types. You can use error. message to obtain error details. PERMISSION_DENIED (error code 1) -- the user selects not to share the location POSITION_UNAVAILABLE (error code 2) -- The current location TIMEOUT (error code 3) cannot be obtained) -- this error is triggered when the location cannot be obtained at the specified time. The third parameter options is an optional parameter. The attribute is as follows: enableHighAccuracy -- indicates that the browser obtains the location with high precision. The default value is false. When enabled, the browser may not be affected, or it may take a longer time to obtain more accurate location data. Timeout -- specifies the time-out time for obtaining geographic locations. The default value is unlimited. The Unit is milliseconds. MaximumAge -- maximum validity period. This parameter specifies how long it will take to obtain the location again when you obtain the location again. The default value is 0, indicating that the browser needs to re-calculate the location immediately.
The following shows how to call Baidu API to display the current location based on geographical location information.

Access Baidu API first and then write the callback function as follows:

Function successCallback (position) {setText (position. coords. latitude, "latitude"); setText (position. coords. longpolling, "longpolling"); var map = new BMap. map ("container"); // create a Map instance var point = new BMap. point (position. coords. longpolling, position. coords. latitude); // create a Coordinate map. centerAndZoom (point, 15); // initialize the map and set the coordinates of the center and map level. addControl (new BMap. navigationControl (); // Add the map of the pan zoom control. addControl (new BMap. scaleControl (); // Add a scale control map. addControl (new BMap. overviewMapControl (); // Add the thumbnail map control var marker = new BMap. marker (point); // creates a map annotation. addOverlay (marker); // Add the annotation to the map}

Then the problem arises, and it is found that the location is different from the actual location. It turns out to be like this:

Why is Baidu coordinate offset?

The International Latitude and longitude coordinates standard is WGS-84, domestic must at least use the GCJ-02 developed by the national test Bureau, the geographic location is encrypted for the first time. On the basis of Baidu coordinates, the secondary encryption measures of BD-09 are carried out to protect the privacy of individuals. The coordinate system of Baidu's external interface is not the real longitude and latitude of GPS collection, and must be converted through the coordinate conversion interface.

How to migrate coordinates from other systems to Baidu coordinates?

Developers can use the coordinate conversion interface for conversion. Developers of JavaScript API, Android SDK, and iOS SDK can directly call the corresponding method for conversion.


Remember to reference the JS file used for conversion before using the conversion excuse.

<Script type = "text/javascript" src = "http://developer.baidu.com/map/jsdemo/demo/convertor.js"> </script>

Callback Function after conversion:

Function successCallback (position) {setText (position. coords. latitude, "latitude"); setText (position. coords. longpolling, "longpolling"); var map = new BMap. map ("container"); // create a Map instance var point = new BMap. point (position. coords. longpolling, position. coords. latitude); // create a Coordinate map. centerAndZoom (point, 15); // initialize the map and set the coordinates of the center and map level. addControl (new BMap. navigationControl (); // Add the map of the pan zoom control. addControl (new BMap. scaleControl (); // Add a scale control map. addControl (new BMap. overviewMapControl (); // Add the thumbnail map control translateCallback = function (Point) {var marker = new BMap. marker (Point); // creates a map annotation. addOverlay (marker); // Add the annotation to the map. setCenter (point);} BMap. convertor. translate (point, 0, translateCallback); // convert the real longitude and latitude to Baidu coordinates}


Related Article

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.