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

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>

相关推荐
2501_9151063211 小时前
iOS 抓不到包怎么办?从 HTTPS 代理排查到 TCP 数据流捕获的全链路解决方案
android·tcp/ip·ios·小程序·https·uni-app·iphone
游戏开发爱好者812 小时前
APP上架苹果应用商店经验教训与注意事项
android·ios·小程序·https·uni-app·iphone·webview
hyswl66613 小时前
数字货物搬家小程序
python·小程序
郭俊强14 小时前
小程序RSA、AES加密
小程序
Dest1ny-安全14 小时前
CTF入门:国内线上CTF比赛时间及部分题目资源
网络·安全·web安全·微信小程序·php
2501_9160074715 小时前
苹果应用商店上架的系统逻辑,从产品开发到使用 开心上架 上架IPA 交付审核流程
android·ios·小程序·https·uni-app·iphone·webview
kyh100338112016 小时前
去水印微信小程序搭建
大数据·微信小程序·去水印·短视频去水印·去水印微信小程序
2501_9160088916 小时前
Python抓包HTTPS详解:Wireshark、Fiddler、Charles等工具使用教程
python·ios·小程序·https·uni-app·wireshark·iphone
刻刻帝的海角16 小时前
uniapp引入qqmap-wx-jssdk实现微信小程序端获取用户当前位置
微信小程序·小程序·uni-app
2501_9160088917 小时前
uni-app 上架到 App Store 的项目流程,构建、打包与使用开心上架(Appuploader)上传
android·ios·小程序·https·uni-app·iphone·webview