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

背景

最近在做一個(gè)類(lèi)似支付寶口碑商家的功能模塊，其中有個(gè)功能就是計(jì)算出用戶(hù)與商家的距離，如下圖：

支付寶口碑商家頁(yè)面截圖

思路分析

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

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

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

4、計(jì)算出的距離顯示在用戶(hù)端；

用到的工具

1、HTML5地理定位API；

2、百度地圖API；

百度地圖API使用

1、在百度地圖開(kāi)放平臺(tái)注冊(cè)開(kāi)發(fā)者賬號(hào)；

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

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

代碼實(shí)現(xiàn)

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

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

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

seller.html運(yùn)行效果圖如下：

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

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

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

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

user.html運(yùn)行效果圖：

1、初次運(yùn)行，詢(xún)問(wèn)是否共享位置信息

2、點(diǎn)擊確認(rèn)共享位置信息，彈出用戶(hù)與商家的距離

總結(jié)

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

2、由于HTML5地理定位僅限在移動(dòng)端生效，因此使用HTML5地理定位需要在移動(dòng)端下運(yùn)行

最后

覺(jué)得文章不錯(cuò)的話，給我個(gè)關(guān)注哇，點(diǎn)個(gè)贊唄！

總結(jié)

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

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