uniapp 地图组件（map）的使用总结

这段时间在开发uniapp的时候使用到map组件 
总结一下本次在uniapp中使用map遇到的一些问题

文章分别是基础 定位图标  获取自身经纬度 通过经纬度获取当时城市信息

首先先看成品

废话不多说，直接开始。

首先引入map组件 

 得到的样式是这样

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

定位图标

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

大概是这样的。

 获取自身经纬度

进入页面拿到用户自身的经纬度

在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.longitude
									this.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中使用地图大概就这些

如果你还有什么问题你可以选择↓↓↓

微信公众号搜索 海海学前端 来了解更多