Use HTML5 to get the latitude and longitude of the current phone, and access Baidu Map API, the current location of the query

Source: Internet
Author: User

Recent project needs, a little research on HTML5 get the current location of the problem.

Getting the latitude and longitude of the current position is simple, a code is done

[JavaScript]View Plaincopy print?
    1. Navigator.geolocation.getCurrentPosition (function (position) {
    2. longitude = position.coords.longitude;
    3. latitude = position.coords.latitude;
    4. });

Then consult the Baidu Map API, very easy, but also a few lines of code on the matter

[JavaScript]View Plaincopy print?
    1. var map = new Bmap.map ("Allmap"); <pre name="code" class="JavaScript" > var point = new Bmap.point (longitude,latitude); <pre name= "code" class="JavaScript" > var GEOC = N  EW Bmap.geocoder ();
     
[JavaScript]View Plain Copy print?
    1. Geoc.getlocation (Point, function (RS) {
    2. var addcomp = rs.addresscomponents;
    3. Alert (addcomp.province + "," + addcomp.city + ", " + addcomp.district + "," + Addcomp.street + "," + Ad  Dcomp.streetnumber);
    4. });
       

OK, I thought this was the end, the actual test found a bit of a problem, the location of the display and my real position deviation of about two or three km or so.

At first thought it was HTML5 to get the latitude and longitude deviation problem, but not

And then began to look for information, inadvertently found a called coordinate transformation of things, a search to know, the original Baidu map to the coordinates of the depth of encapsulation, must through the interface he provided to coordinate transformation only line, nonsense not to say, on the final code bar

[JavaScript]View Plaincopy print?
  1. var map = new Bmap.map ("Allmap");
  2. var longitude, Latitude;
  3. Navigator.geolocation.getCurrentPosition (function (position) {
  4. longitude = position.coords.longitude;
  5. latitude = position.coords.latitude;
  6. });
  7. SetTimeout (function () {
  8. var gpspoint = New Bmap.point (longitude, latitude);
  9. BMap.Convertor.translate (gpspoint, 0, function (point) {
  10. var GEOC = new Bmap.geocoder ();
  11. Geoc.getlocation (Point, function (RS) {
  12. var addcomp = rs.addresscomponents;
  13. Alert (addcomp.province + "," + addcomp.city + ", " + addcomp.district + "," + Addcomp.street + "," + Ad  Dcomp.streetnumber);
  14. });
  15. });
  16. }, 3000);
         

This code relies on two packages

[HTML]View Plaincopy print?
    1. <script type="Text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= secret key"> </Script>
    2. <script type="Text/javascript" src= "http://developer.baidu.com/map/jsdemo/demo/ Convertor.js "></script>

Use HTML5 to get the latitude and longitude of the current phone, and access Baidu Map API, query the current location

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.