H5 combined with Baidu map to achieve GPS positioning example tutorial

Preface

At present, we will use positioning when doing m-end. When the user opens the h5 page for the first time, GPS positioning will be started and combined with Baidu map to find the city. According to our logical idea, the GPS positioning is used to obtain the longitude and latitude, which is then sent to the background to call an interface on Baidu to find the city name.

1. After querying to get the city name, we query the corresponding city id in our own database based on the city name (the query will be very frequent, it can be queried based on xml cache, or it can be placed in redis)

2. For insurance purposes, we will also maintain a set of city information based on longitude and latitude in our own library to prevent positioning from being affected when the interface is unavailable.

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) {10             function getPosSuccess(position) {11                 coords = position.coords;12                 lat = coords.latitude, lng = coords.longitude;13                 $.ajax({14                     type: 'GET',15                     dataType: 'json',16                     url: '/Home/GetPositionArea',17                     data: { 'lat': lat, 'lng': lng },18                     success: function (data) {19 20                     }21                 });22             };23             function getPosError(err) {24                 switch (err) {25                     case err.PERMISSION_DENIED:26                         console.log("您拒绝了共享位置，可手动选择城市。");27                         break;28                     case err.POSITION_UNAVAILABLE:29                         console.log("无法获取当前位置");30                         break;31                     case err.TIMEOUT:32                         console.log("获取位置超时");33                         break;34                     default:35                         console.log("未知错误");36                         break;37                 }38                 39             };40             navigator.geolocation.getCurrentPosition(getPosSuccess, getPosError, null);41         } else {42             43         };44 45     })();

Combined with Baidu interface to query specific cities

 JsonResult GetPositionArea( lng,  api = result =

The above is the detailed content of H5 combined with Baidu map to achieve GPS positioning example tutorial. For more information, please follow other related articles on the PHP Chinese website!