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

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?

2. var map = new Bmap.map ("Allmap");
4. var longitude, Latitude;
6. Navigator.geolocation.getCurrentPosition (function (position) {
8. longitude = position.coords.longitude;
10. latitude = position.coords.latitude;
12. });
14. SetTimeout (function () {
16. var gpspoint = New Bmap.point (longitude, latitude);
18. BMap.Convertor.translate (gpspoint, 0, function (point) {
20. var GEOC = new Bmap.geocoder ();
22. Geoc.getlocation (Point, function (RS) {
24. var addcomp = rs.addresscomponents;
26. Alert (addcomp.province + "," + addcomp.city + ", " + addcomp.district + "," + Addcomp.street + "," + Ad  Dcomp.streetnumber);
28. });
30. });
32. }, 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