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

### 实现 UniApp 中腾讯地图选点并获取省市区信息 在 UniApp 开发环境中集成腾讯地图服务来实现选点功能，并进一步解析所选地点对应的省市区信息是一项常见的需求。通过引入腾讯位置服务 SDK 可简化这一过程。 #### 初始化项目配置 为了使应用能够调用腾讯地图 API，需先完成必要的准备工作： - 注册成为开发者并申请相应的密钥 (Key)，用于身份验证。 - 安装腾讯位置服务 JavaScript SDK，在 `manifest.json` 文件内声明所需权限以及设置插件依赖项[^2]。 ```json { "mp-weixin": { ... "usingComponents": {}, "permissions": [ "scope.userLocation" ], "plugins": { "tencent-map-plugin": { "version": "latest", "provider": "wx7c0f9b5e4d6aebaf" } } } } ``` #### 创建地图组件页面结构 构建一个简单的界面布局以便于用户交互操作，通常包含地图展示区域和输入框用来显示地址详情等控件。 ```html <template> <view class="container"> <!-- 地图容器 --> <map id="myMap" :latitude="centerLat" :longitude="centerLng"></map> <!-- 显示当前位置按钮 --> <button @click="getCurrentPosition">定位当前</button> <!-- 展示详细地址 --> <input v-model="addressDetail"/> <!-- 提交选定坐标 --> <button @click="submitLocation">确认选择</button> </view> </template> ``` #### 编写逻辑处理脚本 接下来定义 Vue 组件内的方法以响应用户的动作事件，比如点击“定位当前”时自动移动到设备所在的位置；当用户拖拽标记改变其位置后更新视图中的经纬度数值；最后提交表单前转换地理编码为可读性强的人类语言描述形式即省市区名称组合字符串[^1]。 ```javascript <script> export default { data() { return { centerLat: '', // 当前中心纬度 centerLng: '', // 当前中心经度 addressDetail: '' // 用户自定义备注或完整地址文字表述 }; }, onLoad(options){ this.initMap(); }, methods:{ initMap(){ const mapContext = uni.createMapContext('myMap',this); // 设置默认城市或其他初始化参数... }, getCurrentPosition(){ wx.getLocation({ type:'gcj02', success:(res)=>{ let latitude=res.latitude; let longitude=res.longitude; this.centerLat=latitude; this.centerLng=longitude; // 更新地图视角至新位置 this.updateMapView(latitude,longitude); // 查询该坐标的行政区划数据 this.getAddressByCoord(latitude,longitude); } }); }, updateMapView(lat,lng){ const context = uni.createMapContext('myMap'); context.moveToLocation({latitude:lat,longitude:lng}); }, getAddressByCoord(lat, lng) { var that=this; qqmapsdk.reverseGeocoder({ location: {latitude: lat, longitude: lng}, success(res) { console.log("反向地理编码成功", res.result.address_reference.district); // 假设返回的结果里有 province city district 字段可以直接拼接成完整的地区路径 that.addressDetail=`${res.result.ad_info.province}${res.result.ad_info.city}${res.result.ad_info.district}`; }, fail(errMsg) { console.error(`失败 ${errMsg}`); } }) }, submitLocation(){ alert(this.addressDetail); // 这里可以继续扩展其他业务流程，例如上传服务器端保存等等 } } }; </script> ``` 上述代码片段展示了如何利用腾讯地图开放平台提供的接口和服务快速搭建起具备基本功能的地图应用程序框架。值得注意的是实际开发过程中还需要考虑异常情况下的错误提示、加载动画效果优化等方面的问题。