H5 combining Baidu Map to realize the example of GPS positioning

Objective

At present, we do the M-end will be used to locate, when the user first open the H5 page will start GPS positioning, and combined with Baidu map to find the city. According to our logical thinking is GPS positioning to obtain latitude and longitude, to the background call Baidu an interface to find the city name.

1, the query to get the city name, we based on the city name in our own database to query the corresponding City ID (query will be very frequent, can be based on XML cache query, can also be placed in Redis)

2, for the sake of insurance, we will also in their own library in accordance with latitude and longitude to maintain a set of city information, to prevent the interface is not affected when the location.

H5 GPS Positioning

 1 (function () {2 var 3 isgeolocation = False, 4 lat = 0, 5 LNG = 0, 6 coords = null; 7 8 if (navigator.geolocation) {isgeolocation = true;}; 9 if (isgeolocation) {Ten function getpossuccess (position) {coords = Position.coords ; lat = coords.latitude, LNG = coords.longitude;13 $.ajax ({type: ' GET ', DataType: ' json ', url: '/home/getpositionarea ', + D                 ATA: {' lat ': lat, ' LNG ': LNG},18 success:function (data) {19 20}21                     });};23 function Getposerror (err) {25 switch (ERR) Case Err. Permission_denied:26 Console.log ("You have rejected the shared location, you can select the city manually. "); break;28 case Err. Position_unavailable:29 Console.log ("Unable to get current position"), break;31 case ER R.timeout:32 Console.log ("Get Location timeout"), break;34 default              : Console.log ("Unknown Error"), break;37}38 39  };40 navigator.geolocation.getCurrentPosition (getpossuccess, getposerror, NULL); {42 43};44 45});

Combined with Baidu interface query specific cities

Jsonresult Getpositionarea (LNG,  API = result =