微信小程序使用腾讯位置服务获取经纬度或省市区

mac2025-02-06  26

微信小程序使用腾讯位置服务获取经纬度或省市区

官方文档:https://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html 根据经纬度获取省市区

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); // 实例化API核心类 var qqmapsdk = new QQMapWX({ key: '去官方文档可以申请自己的密钥' // 必填 }); /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this var latitude = '37.94036'// 纬度,浮点数,范围为90 ~ -90 var longitude = '112.48699' // 经度,浮点数,范围为180 ~ -180 //根据经纬度获取所在城市 qqmapsdk.reverseGeocoder({ location: { latitude: latitude, longitude: longitude }, success: function (res) { console.log('省市区:', res.result.address) } }); },

根据地址获取经纬度 .js

//腾讯地图 formSubmit(e) { var _this = this; //调用地址解析接口 qqmapsdk.geocoder({ //获取表单传入地址 address: e.detail.value.geocoder, //地址参数,例:固定地址,address: '北京市海淀区彩和坊路海淀西大街74号' success: function (res) {//成功后的回调 console.log(res); var res = res.result; var latitude = res.location.lat; var longitude = res.location.lng; //根据地址解析在地图上标记解析地址位置 _this.setData({ // 获取返回结果,放到markers及poi中,并在地图展示 markers: [{ id: 0, title: res.title, latitude: latitude, longitude: longitude, width: 20, height: 20, }], poi: { //根据自己data数据设置相应的地图中心坐标变量名称 latitude: latitude, longitude: longitude } }); }, fail: function (error) { console.error(error); }, complete: function (res) { console.log(res); } }) },

.wxml

<!--地图容器--> <!--longitude及latitude为设置为调转到指定地址位置,默认不显示--> <map id="myMap" markers="{{markers}}" style="width:100%;height:300px;" longitude="{{poi.longitude}}" latitude="{{poi.latitude}}" scale='16' show-location> </map> <!--form表单--> <form bindsubmit="formSubmit"> <!--地址描述输入框,示例:北京市海淀区彩和坊路海淀西大街74号--> <input style="border:1px solid #000;" name="geocoder"></input> <!--提交表单数据--> <button form-type="submit">地址解析</button> </form> <!--地址描述经纬度展示--> <view>地址纬度:{{poi.latitude}}</view> <view>地址经度:{{poi.longitude}}</view> <view bindtap="dinsx">地址</view>

有什么问题欢迎评论留言,我会及时回复你的

最新回复(0)