1、在腾讯地图api申请key(添加微信小程序的appid)。

每个Key每日可以免费使用100次,超过次数后会导致地图不显示。可以多申请几个Key解决。
WebService API | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案;有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。icon-default.png?t=N7T8https://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>

Logo

助力广东及东莞地区开发者,代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展,成为松山湖开发者首选的工作与学习平台

更多推荐