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

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。
 

本文给大家介绍的组件是： 

前端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代码实现部分

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

```