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

总结

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