<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>