在uniapp中實現(xiàn)地圖距離計算可以借助第三方地圖服務API來實現(xiàn)。以下是一種基本的實現(xiàn)方式：

1. 注冊地圖服務API賬號：你可以選擇使用高德地圖、百度地圖等提供地圖服務的廠商，注冊一個開發(fā)者賬號并獲取API密鑰。

2. 安裝相關插件或SDK：根據(jù)你選擇的地圖服務提供商，下載并安裝相應的uniapp插件或SDK。例如，如果選擇使用高德地圖，可以安裝uni-amap-map插件。

3. 配置API密鑰：在uniapp項目的配置文件（manifest.json或vue.config.js）中，將你獲取的API密鑰配置進去，以便你的應用程序能夠訪問地圖服務API。

4. 創(chuàng)建地圖組件：在uniapp的頁面中創(chuàng)建一個地圖組件，可以使用插件或SDK提供的相關組件進行創(chuàng)建。例如，在使用高德地圖的情況下，可以使用<amap-map>標簽創(chuàng)建地圖組件。

5. 獲取坐標信息：在你的應用中，需要獲取用戶輸入的起始位置和目標位置的經緯度坐標信息，可以通過表單、定位功能或手動輸入等方式獲取。

6. 調用API計算距離：使用地圖服務API提供的距離計算接口，傳入起始位置和目標位置的經緯度坐標，調用API進行距離計算。例如，在使用高德地圖的情況下，可以使用AMap.Distance類的getDistance()方法來計算距離。

7. 顯示結果：將距離計算結果顯示在你的應用程序中，可以通過文本、彈窗等方式展示給用戶。

這里我使用的是騰訊地圖；騰訊地圖實現(xiàn)上述功能在配置上的話會稍微復雜一點點；

首先需要配置下述代碼

"permission": {"scope.userLocation": {"desc": "你的位置信息將用于小程序位置接口的效果展示"}}

首先需要再pages.json上配置；

?然后在manifest.json中的源碼視圖中配置

然后需要將你申請的key放入

?之后就可以在頁面使用了；可以使用uniapp提供的api來進行自身位置的獲取，首先使用getSetting來獲取是否開啟 定位權限；如果獲取定位權限再根據(jù)getLocation獲取自身位置的經緯度；然后根據(jù)自身定位與目標定位計算出距離

下面是計算代碼

// 計算距離function getDistance(lat1, lon1, lat2, lon2) {const earthRadius = 6371; // 地球半徑，單位為千米console.log(lat1, lon1, lat2, lon2);// 將經緯度轉換為弧度const radLat1 = (Math.PI / 180) * lat1;const radLon1 = (Math.PI / 180) * lon1;const radLat2 = (Math.PI / 180) * lat2;const radLon2 = (Math.PI / 180) * lon2;console.log(radLat1,radLat2,radLon1,radLon2);// 計算經緯度的差值const deltaLat = radLat2 - radLat1;const deltaLon = radLon2 - radLon1;console.log(deltaLat,deltaLon);// 使用Haversine公式計算距離const a =Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +Math.cos(radLat1) *Math.cos(radLat2) *Math.sin(deltaLon / 2) *Math.sin(deltaLon / 2);const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));const distance = earthRadius * c;return distance.toFixed(2); // 返回保留兩位小數(shù)的距離值};

注意:距離為km；調用方法為getDistance（經度1，緯度1，經度2，緯度2），希望對您有所幫助

?

?