背景
最近在做一個類似支付寶口碑商家的功能模組，其中有個功能就是計算出使用者與商家的距離，如下圖：
支付寶口碑商家頁面截圖
思路分析1、商家選取店鋪地址，將座標經緯度存入資料庫；
2、移動端定位當前使用者座標經緯度；
3、將商家經緯度從資料庫取出與當前使用者經緯度進行計算；
4、計算出的距離顯示在使用者端；
用到的工具1、HTML5地理定位API；
2、百度地圖API；
百度地圖API使用1、在百度地圖開放平臺註冊開發者賬號；
2、登入開發者賬號，在控制檯中建立應用，如下圖：
注意：移動web端的話，應用型別記得選擇瀏覽器端
程式碼實現1、建立seller.html檔案，用來提供商家選取地址座標經緯度；注意：程式碼中的ak="您的金鑰"，記得換成控制檯中建立應用的AK金鑰
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{ width: 100%; height: 100%; margin:0; font-family:"微軟雅黑"; font-size:14px; } #l-map{ height:300px; width:100%; } #r-result{ width:100%; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script> <title>商家選取店鋪地址</title></head><body> <div style="display: flex;"> <div style="width: 50%;height: 700px" id="l-map"></div> <div style="width: 50%"> <div id="r-result">請輸入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div> <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> </div> </div></body></html><script type="text/javascript"> // 百度地圖API功能 function G(id) { return document.getElementById(id); } var map = new BMap.Map("l-map"); map.centerAndZoom("北京",12); // 初始化地圖,設定城市和地圖級別。 var ac = new BMap.Autocomplete( //建立一個自動完成的物件 {"input" : "suggestId" ,"location" : map }); var myValue; ac.addEventListener("onconfirm", function(e) { //滑鼠點選下拉列表後的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace(); }); function setPlace(){ map.clearOverlays(); //清除地圖上所有覆蓋物 function myFun(){ var pp = local.getResults().getPoi(0).point; //獲取第一個智慧搜尋的結果 map.centerAndZoom(pp, 18); map.addOverlay(new BMap.Marker(pp)); //新增標註 } var local = new BMap.LocalSearch(map, { //智慧搜尋 onSearchComplete: myFun }); local.search(myValue); } //滑鼠單擊獲取點選的經緯度 map.addEventListener("click",function(e){ alert('該點選區域的經緯度為：'+e.point.lng + "," + e.point.lat);//將該經緯度存入資料庫中 });</script>複製程式碼seller.html執行效果圖如下：
2、建立user.html檔案，用來定位使用者座標經緯度，及計算與商家的距離；注意1：由於HTML5地理定位僅限在移動端生效，因此user.html需要在移動端下執行(可將檔案直接傳送到手機上，在手機上開啟執行)
注意2：程式碼中的ak="您的金鑰"，記得換成控制檯中建立應用的AK金鑰
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script> <title>計算使用者到商家的距離</title></head><body></body></html><script type="text/javascript"> //使用HTML5地理定位 function getLocation(){ //檢測瀏覽器是否支援地理定位 if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); //如果getCurrentPosition()執行成功，則向引數showPosition中規定的函式返回一個coordinates物件 //getCurrentPosition()方法的第二個引數showError用於處理錯誤。它規定當獲取使用者位置失敗時執行的函式 }else{ alert("該裝置瀏覽器不支援地理定位"); } } function showPosition(position){ var Longitude=position.coords.longitude;//HTML5定位獲取的經度 var Latitude=position.coords.latitude;//HTML5定位獲取的緯度 //將HTML5定位獲取的經緯度，通過百度地圖API轉換成適應於百度定位的經緯度 var ggPoint = new BMap.Point(Longitude,Latitude); //座標轉換完之後的回撥函式 translateCallback = function (data){ if(data.status === 0) { var map = new BMap.Map(); console.log(data.points[0]);//轉換後新的使用者經緯度 var pointA = new BMap.Point(data.points[0].lng,data.points[0].lat);//使用者的經緯度 var pointB = new BMap.Point(商家經度,商家緯度);//從資料庫中取出商家的經緯度 alert('您到商家的距離是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //獲取兩點距離,保留小數點後兩位 } } var convertor = new BMap.Convertor(); var pointArr = []; pointArr.push(ggPoint); convertor.translate(pointArr, 1, 5, translateCallback) } function showError(error){ switch(error.code) { case error.PERMISSION_DENIED: alert("使用者不允許地理定位") break; case error.POSITION_UNAVAILABLE: alert("無法獲取當前位置") break; case error.TIMEOUT: alert("操作超時") break; case error.UNKNOWN_ERROR: alert("未知錯誤") break; } } getLocation();</script>複製程式碼user.html執行效果圖：
1、初次執行，詢問是否共享位置資訊
總結
1、百度地圖API也可定位使用者的座標經緯度，但是會出現偏移量，與實際位置相差很大，因此可使用HTML5地理定位使用者的原始座標，再將原始座標轉換成百度的定位座標
2、由於HTML5地理定位僅限在移動端生效，因此使用HTML5地理定位需要在移動端下執行
最新評論