<template><view class="content"><view><input class="uni-input" placeholder="輸入緯度" v-model="lat" /><input class="uni-input" placeholder="輸入經度" v-model="lon" /><button @click="reverseGeocoder" style="width: 750rpx;">轉化</button><view>位置：{{remark}}</view></view><button @click="onclick()">點擊獲取經緯度信息</button><br /><text>當前位置經度信息：{{longitude}}</text><text>當前位置維度信息：{{latitude}}</text></view> </template><script>import QQMapWX from '@/common/qqmap-wx-jssdk.js'export default {data() {return {// 116.56086,39.774944lat: '39.774944',lon: '116.56086',qqMap: new QQMapWX({key: 'JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU',vm: this}),remark: undefined,longitude: '',latitude: ''}},onReady() {this.formSubmit();},methods: {formSubmit() {var _this = this;//調用距離計算接口this.qqMap.calculateDistance({//mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行），不填默認：'walking',可不填//from參數不填默認當前地址//獲取表單提交的經緯度并設置from和to參數（示例為string格式）// from: e.detail.value.start || '', //若起點有數據則采用起點坐標，若為空默認當前地址// to: e.detail.value.dest, //終點坐標// mode: "walking",from: "39.775272,116.554588", //當前位置的經緯度to: "39.780864,116.567515", //辦公地點經緯度success: (res) => { //成功后的回調// debuggerconsole.log(res);let hw = res.result.elements[0].distance; //拿到距離(米)console.log("hw", hw);if (hw && hw !== -1) {if (hw < 1000) {hw = hw + "m";}//轉換成公里else {hw = (hw / 2 / 500).toFixed(2) + "km";}} else {hw = "距離太近或請刷新重試";}console.log("當前位置與辦公地點距離:" + hw);},});},// 接口調用說明onclick() {let _this = thisconsole.log("開始執行。。。");uni.getLocation({type: "gcj02",// type: "wgs84",geocode: true,success: (res) => {console.log("獲取經緯度成功");_this.longitude = res.longitude;_this.latitude = res.latitude;console.log("當前位置的經度:", res.longitude);console.log("當前位置的緯度:", res.latitude);},// 此處新增測試fail: () => {console.log("獲取經緯度失敗");},complete: () => {// 解析地址this.qqMap.reverseGeocoder({location: {latitude: _this.latitude,longitude: _this.longitude,},success: function(res) {console.log("解析地址成功");console.log(res);// 省let province = res.result.ad_info.province;// 市let city = res.result.ad_info.city;// console.log(province);// console.log(city);},fail: function(res) {uni.showToast({title: "定位失敗",duration: 2000,icon: "none",});console.log(res);},complete: function(res) {console.log(res);},});},// 新增end});},// 示例 經緯度轉換位置描述reverseGeocoder() {let _this = thisthis.qqMap.reverseGeocoder({location: {latitude: _this.lat,longitude: _this.lon},success: (res) => {console.log(res)this.remark = res.result.address},fail: (res) => {console.error(res)}})},},} </script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;} </style>

總結

以上是生活随笔為你收集整理的移动端H5 腾讯地图sdk 当前位置 地址你解析 距离计算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。