博主介绍:本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮助到您;
🍅希望此文章可以帮助到您🍅
微信小程序文章推荐
效果显示
说明:此图是获取用户的详细坐标之后;进行坐标解析之后得到的详细地址信息
一、前端界面
<view class="mapshow">
<map class="mapUI" id="myMap" markers="{{markers}}" latitude="{{latitude}}" longitude="{{longitude}}" covers="13" ></map>
</view>
二、js逻辑处理
1:定位数据
首先是进行定位数据的获取;当然你可以根据自己的需求api接口获取数据也是可以的;
wx.getLocation({
isHighAccuracy: true, // 开启地图精准定位
type: 'gcj02', // 地图类型写这个
success: res => {
console.log(res);
this.setData({
mylatitude: res.latitude,
mylongitude: res.longitude,
location: res,
latitude: res.latitude,
longitude: res.longitude
})
},
})
2:坐标解析
对于坐标解析调用的是腾讯地图的api接口;具体的可以查看地址:WebService API | 腾讯位置服务
var qqMapApi = 'https://apis.map.qq.com/ws/geocoder/v1/' + "?location=" 纬度 ',' +
经度 + "&key=" + '您申请的key' + "&get_poi=1";
3:获取地址
sendRequest: function (qqMapApi) {
const that = this
wx.request({
url: qqMapApi,
header: {
'Content-Type': 'application/json'
},
data: {},
method: 'GET',
success: (res) => {
let mapAddress = [];
mapAddress.push({
id: 9001,
latitude: that.data.mylatitude,
longitude:that.data.mylongitude,
name: "终点",
iconPath: '../image/markerimage.png',
content: "111",
width: '34px',
height: '34px',
callout: {
content: res.data.result.address,
padding: 5,
fontSize: 12,
textAlign: 'center',
display: 'ALWAYS',
borderRadius: 5,
borderWidth: 1,
bgColor: '#ffffff',
borderColor: "#40ac44"
}
}),
this.setData({
markers: mapAddress,
})
that.setData({
markers: mapAddress,
});
}
})
},
说明:通过调用api的方法就可以获取到详细的地址信息;对于地址的用途你可以根据自己的需求去处理就可以了
三、留个脚印吧
大家要是感觉此篇文章有意义;那就给个关注、点赞,收藏吧;
🍅也可以关注文档末尾公众号🍅