首頁 > 後端開發 > C#.Net教程 > H5結合百度map實現GPS定位的實例教程

H5結合百度map實現GPS定位的實例教程

零下一度
發布: 2017-06-23 16:50:30
原創
2168 人瀏覽過

前言

     目前我們做m端時都會用到定位,當使用者第一次開啟h5頁面時會啟動gps定位,並結合百度map來找城市。依照我們的邏輯思路就是gps定位取得經緯度,傳到後台呼叫百度的一個介面查找城市名稱。

     1、查詢得到城市名稱,我們根據城市名稱在我們自己的資料庫裡再查詢對應的城市id(查詢會很頻繁,可以基於xml 快取查詢,也可以放到redis裡)

     2、為了保險起見,我們也會在自己的庫裡根據經緯度維護一套城市信息,防止接口不可用時不影響定位。

 

H5 GPS定位

 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     })();
登入後複製

#結合百度介面查詢具體城市

 JsonResult GetPositionArea( lng,  api = result =
登入後複製

 

以上是H5結合百度map實現GPS定位的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板