微信小程序获取当前位置并自定义浮窗
腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案;有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。每个Key每日可以免费使用100次,超过次数后会导致地图不显示。4、在uniapp小程序文件重添加权限和腾讯地图的文件.因为微信需要授权位置。key: '你的key'1、在腾讯地图
1、在腾讯地图api申请key(添加微信小程序的appid)。
每个Key每日可以免费使用100次,超过次数后会导致地图不显示。可以多申请几个Key解决。
WebService API | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案;有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/service/webService/webServiceGuide/overview
2、 先创建应用
3、 注意:域名白名单一定要填写,否则会导致地图不显示。
4、在uniapp小程序文件重添加权限和腾讯地图的文件.因为微信需要授权位置
5、设置地图浮窗(直接调用即可)
getLocation() {
const vm = this
vm.markers = []
const qqmapsdk = new QQMapWX({
key: '你的key'
});
wx.getLocation({
type: 'wgs84',
isHighAccuracy: true,
success(res) {
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
coord_type: 1,
get_poi: 1,
poi_options: 'policy=2;radius=600;page_size=20;page_index=1',
success: (r) => {
vm.latitude = r.result.location.lat,
vm.longitude = r.result.location.lng
const makerObj = {
iconPath: "图片地址",
longitude: vm.longitude,
latitude: vm.latitude,
id: 0,
width: 46,
height: 56,
callout: {
content: '当前位置',
color: '#ff0000',
fontSize: 14,
borderWidth: 2,
borderRadius: 10,
borderColor: '#000000',
bgColor: '#fff',
padding: 5,
display: 'ALWAYS',
textAlign: 'center'
},
}
vm.markers.push(makerObj)
},
fail: function(res) {}
});
}
});
},
6、地图展示
<map id="myMap" :markers="markers" style="width:100%;height:90%;"
:longitude="longitude" :latitude="latitude" show-location scale="18" @markertap="markertap">
</map>
更多推荐
所有评论(0)