微信小程序获取当前位置并自定义浮窗

本文主要是介绍微信小程序获取当前位置并自定义浮窗，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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) {}
                       });
                   }
               });
           },