前端Vue腾讯地图SDK Api经纬度解析为地址信息Geocoding 可用于定位经纬度信息解析为地址

  • 前端Vue腾讯地图SDK Api经纬度解析为地址信息Geocoding 可用于定位经纬度信息解析为地址已关闭评论
  • 127 次浏览
  • A+
所属分类:Web前端

前端Vue腾讯地图SDK Api经纬度解析为地址信息Geocoding 可用于定位经纬度信息解析为地址, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13311

效果图如下:

前端Vue腾讯地图SDK Api经纬度解析为地址信息Geocoding 可用于定位经纬度信息解析为地址

前端Vue腾讯地图SDK Api经纬度解析为地址信息Geocoding 可用于定位经纬度信息解析为地址

前端Vue腾讯地图SDK Api经纬度解析为地址信息Geocoding 可用于定位经纬度信息解析为地址

cc-tencentGeocoding

使用方法

 // 引入腾讯地图sdk  import qqmapsdk from "../../utils/qqmap-wx-jssdk.min.js";  // 地址反向编码解析地址  geocodingClick(e) {  const QQMapWX = new qqmapsdk({  //腾讯地图  需要用户自己去申请key  key: "SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI"  });  let that = this;  QQMapWX.reverseGeocoder({  location: {  latitude: that.locatonDict.lat,  longitude: that.locatonDict.lng  },  success: function(res) {  console.log('解析地址成功', res);  uni.showModal({  title: "解析地址",  content: "解析地址 = " + JSON.stringify(res)  })  that.addressInfo = JSON.stringify(res);  },  fail: function(res) {  console.log(res);  },  complete: function(res) {  console.log(res);  }  });  },  

HTML代码实现部分

 <template>  <view class="content">  <view style="margin-top: 20px;">{{"经度信息 = "  + locatonDict.lng }}</view>  <view style="margin-top: 20px;">{{"纬度信息 = " + locatonDict.lat }}</view>  <!-- 点击按钮 地址反向编码 -->  <button @click="geocodingClick" style="margin: 28px 20px;">解析地址</button>  <!-- 地址信息 -->  <view class="infoView">{{addressInfo}}</view>  </view>  </template>  <script>  // 引入腾讯地图sdk  import qqmapsdk from "../../utils/qqmap-wx-jssdk.min.js";  export default {  data() {  return {  locatonDict: {  lng: 112.2626,  lat: 23.1578  },  addressInfo: ''  }  },  /**  * 生命周期函数--监听页面显示  */  onShow: function() {  },  methods: {  // 地址反向编码解析地址  geocodingClick(e) {  const QQMapWX = new qqmapsdk({  //腾讯地图  需要用户自己去申请key  key: "SFABZ-WANWW-FISRY-3IGTF-HV7RE-YSFTI"  });  let that = this;  QQMapWX.reverseGeocoder({  location: {  latitude: that.locatonDict.lat,  longitude: that.locatonDict.lng  },  success: function(res) {  console.log('解析地址成功', res);  uni.showModal({  title: "解析地址",  content: "解析地址 = " + JSON.stringify(res)  })  that.addressInfo = JSON.stringify(res);  },  fail: function(res) {  console.log(res);  },  complete: function(res) {  console.log(res);  }  });  },  }  }  </script>  <style>  .content {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  width: 100%;  }  .infoView {  width: 88%;  font-size: 13px;  font-family: PingFangSC-Regular, PingFang SC;  font-weight: 400;  color: #333333;  line-height: 20px;  padding: 12px 8px;  background-color: #F6F7F8;  /* 换行 */  white-space: pre-line;  }  </style>