uniapp地图组件(map)使用与遇到的一些问题总结 uniapp地图组件(map)使用与遇到的

前言
首先先看成品
定位图标
获取自身经纬度
通过经纬度获取当前城市信息
总结

前言这段时间在开发uniapp的时候使用到map组件
总结一下本次在uniapp中使用map遇到的一些问题
文章分别是基础定位图标获取自身经纬度通过经纬度获取当时城市信息

首先先看成品

文章图片

废话不多说，直接开始。
首先引入map组件

得到的样式是这样

文章图片

这里只给了两个回调有更多需求可以去uniapp中搜索 map | uni-app官网

定位图标查了一下官方文档，发现官方文档中并没有关于定位的写法，没办法只能自己手写一个了。
大概是这样的。

文章图片

.map-container {position: relative; overflow: hidden; .cover-view {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80rpx; height: 80rpx; color: #484848; background-color: #fff; background-size: 120rpx 120rpx; background-position: center center; position: absolute; bottom: 100rpx; right: 32rpx; }.cover-image{display: inline-block; width: 30rpx; height: 30rpx; }}

获取自身经纬度进入页面拿到用户自身的经纬度
在onShow中输入

onShow() {uni.getLocation({geocode:true,type: 'wgs84',success: (res) => {console.log(res,'获取当前位置')},address:(res) =>{console.log('address',res)}});

文章图片

需要打开manifest.json

文章图片

如果从来没配置过appld请先配置在进行操作

文章图片

文章图片

然后重新编译就会出现

文章图片

允许之后就可以拿到经纬度信息

文章图片

然后可以将经纬度信息赋值给data中的latitude longitude

onShow() {uni.getLocation({geocode:true,type: 'wgs84',success: (res) => {console.log(res,'获取当前位置')this.longitude =res.longitudethis.latitude = res.latitude},address:(res) =>{console.log('address',res)}}); },

通过经纬度获取当前城市信息首先需要进入腾讯位置服务 /控制台/应用管理/我的应用/添加key选择webServiceApi

文章图片

然后去小程序开发管理/开发设置/服务器域名/request合法域名后面新增

https://apis.map.qq.com;

然后下载

https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.1.zip

引入

文章图片

在ohshow中使用

var qqmapsdk// 实例化API核心类qqmapsdk = new QQMapWX({key: '创建的key'}); qqmapsdk.reverseGeocoder({location:{latitude:this.latitude,longitude:this.longitude},success:(res)=>{console.log('reverseGeocoder',res)},fail:(err)=>{console.log('reverseGeocoder',err)}})

这样就可以通过自身的经纬度获取到当前所在的详细信息
更多地图事件可以查询官网腾讯位置服务 - 立足生态，连接未来
关于地图气泡弹窗在真机不显示或者显示颜色不明显的情况，你可以使用在callout中使用padding
这样就可以显示颜色了
在uniapp中使用地图大概就这些

总结 【uniapp地图组件(map)使用与遇到的一些问题总结】到此这篇关于uniapp地图组件(map)使用与遇到的一些问题总结的文章就介绍到这了,更多相关uniapp地图组件(map)使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！