轉(zhuǎn)載鏈接：https://juejin.im/post/5e7e126b51882573c508be13

背景

最近在做一個類似支付寶口碑商家的功能模塊，其中有個功能就是計算出用戶與商家的距離，如下圖：

支付寶口碑商家頁面截圖

思路分析

1、商家選取店鋪地址，將坐標(biāo)經(jīng)緯度存入數(shù)據(jù)庫；

2、移動端定位當(dāng)前用戶坐標(biāo)經(jīng)緯度；

3、將商家經(jīng)緯度從數(shù)據(jù)庫取出與當(dāng)前用戶經(jīng)緯度進行計算；

4、計算出的距離顯示在用戶端；

用到的工具

1、HTML5地理定位API；

2、百度地圖API；

百度地圖API使用

1、在百度地圖開放平臺注冊開發(fā)者賬號；

2、登錄開發(fā)者賬號，在控制臺中創(chuàng)建應(yīng)用，如下圖：

注意：移動web端的話，應(yīng)用類型記得選擇瀏覽器端

代碼實現(xiàn)

1、創(chuàng)建seller.html文件，用來提供商家選取地址坐標(biāo)經(jīng)緯度；

注意：代碼中的ak="您的密鑰"，記得換成控制臺中創(chuàng)建應(yīng)用的AK密鑰

商家選取店鋪地址 請輸入: 復(fù)制代碼

seller.html運行效果圖如下：

2、創(chuàng)建user.html文件，用來定位用戶坐標(biāo)經(jīng)緯度，及計算與商家的距離；

注意1：由于HTML5地理定位僅限在移動端生效，因此user.html需要在移動端下運行(可將文件直接發(fā)送到手機上，在手機上打開運行)

注意2：代碼中的ak="您的密鑰"，記得換成控制臺中創(chuàng)建應(yīng)用的AK密鑰

計算用戶到商家的距離復(fù)制代碼

user.html運行效果圖：

1、初次運行，詢問是否共享位置信息

2、點擊確認共享位置信息，彈出用戶與商家的距離

總結(jié)

1、百度地圖API也可定位用戶的坐標(biāo)經(jīng)緯度，但是會出現(xiàn)偏移量，與實際位置相差很大，因此可使用HTML5地理定位用戶的原始坐標(biāo)，再將原始坐標(biāo)轉(zhuǎn)換成百度的定位坐標(biāo)

2、由于HTML5地理定位僅限在移動端生效，因此使用HTML5地理定位需要在移動端下運行

最后

覺得文章不錯的話，給我個關(guān)注哇，點個贊唄！

總結(jié)

以上是生活随笔為你收集整理的python 两点之间的距离_手把手教你HTML5实现根据LBS定位到商家两点之间距离多少...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。