uniapp开发微信小程序腾讯地图选点获取省市区

### 实现 UniApp 中微信小程序腾讯地图选点并获取省市区 #### 准备工作 为了在 UniApp 开发环境中集成腾讯地图 API 并实现选择地点以及获取对应的省市区信息，需要完成如下准备工作： - 注册并登录腾讯位置服务平台账号，在应用管理页面创建新应用，并记录下分配的应用 Key[^3]。 - 进入微信公众平台的小程序官方后台，在设置下的第三方服务中的插件管理部分添加“腾讯位置服务地图选点”和“腾讯位置服务城市选择器”的插件申请[^2]。 #### 编写代码逻辑 ##### 初始化地图组件 确保项目中已安装 `@dcloudio/uni-ui` 组件库以便于使用内置的地图组件。接着可以在页面配置文件中引入腾讯地图 SDK 及其样式表： ```html <template> <view class="container"> <!-- 地图容器 --> <map id="myMap" :longitude="location.longitude" :latitude="location.latitude"></map> <!-- 显示地址详情 --> <text>{{ addressInfo }}</text> <!-- 添加按钮用于触发重新定位或确认所选项 --> <button @click="getCurrentLocation">更新我的位置</button> <button @click="confirmSelection">确认选择的位置</button> </view> </template> ``` ##### JavaScript 部分处理函数定义 接下来编写主要业务逻辑来初始化地图实例、监听用户交互事件（比如拖拽结束）、请求反向地理编码接口以获得详细的行政区划数据等操作。 ```javascript <script> export default { data() { return { location: { longitude: '', latitude: '' }, // 当前坐标点经纬度 addressInfo: '正在加载...', // 展示给用户的地址描述文字 mapContext: null, // 存储地图上下文对象引用 }; }, onLoad(options) { this.initMap(); }, methods: { initMap() { const that = this; wx.getLocation({ type: 'gcj02', success(res) { that.location = res; // 设置初始中心点为当前位置 // 创建地图上下文环境并与 HTML 页面上的 map 标签关联起来 that.mapContext = uni.createMapContext('myMap', this); // 订阅地图状态变化通知，特别是标记被移动后的回调 that.mapContext.onMarkerTap(() => {}); that.mapContext.onRegionChangeEnd((e) => { if (e.causedBy === "drag") { that.getAddressFromCoordinates(that.location); // 移动后立即查询新的位置信息 } }); }, fail(err) { console.error("Failed to get current location:", err); } }); // 请求一次默认的当前位置解析 this.getCurrentLocation(); }, getCurrentLocation() { let that = this; wx.chooseLocation({ // 使用 chooseLocation 方法可以更方便地让用户手动挑选具体位置 success(res) { that.location = res; that.getAddressFromCoordinates(res); }, fail(err) { console.log(`chooseLocation failed:${JSON.stringify(err)}`); } }) }, getAddressFromCoordinates(locObj) { var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js').QQMapWX; var qqmapsdk = new QQMapWX({ key: '您的腾讯地图Key' // 替换成自己申请的有效密钥 }); qqmapsdk.reverseGeocoder({ location: locObj, success(response){ this.addressInfo = response.result.ad_info.province + ',' + response.result.ad_info.city + ',' + response.result.ad_info.district ; }, fail(error){ console.warn("Reverse geocoding error",error); } }); }, confirmSelection(){ // 用户点击确认按钮之后的操作... alert(this.addressInfo); } } } </script> ``` 上述代码实现了通过调用微信提供的 `getLocation()` 接口自动获取设备所在地理位置作为起点；利用 `createMapContext()` 构建了一个与 `<map>` 元素绑定在一起的对象来进行后续控制；每当检测到地图视窗发生改变时都会尝试去刷新最新的行政区域名称展示给前端用户查看；最后还提供了两个按钮分别用来刷新最新位置或是提交最终选定的结果。 #### 注意事项 - 应用过程中务必注意保护好自己的 API 密钥安全，防止泄露造成不必要的损失。 - 对外暴露的服务端接口应当做好必要的鉴权校验措施，避免恶意访问带来的风险。 - 如果遇到性能瓶颈或者其他技术难题建议查阅官方文档寻求帮助或者联系技术支持团队解决。