站三界导航
首页 uniapp代码uniapp 地图组件(map)的使用总结

uniapp 地图组件(map)的使用总结

  • uniapp代码
  • 来源:站三界导航
  • 55阅读
  • 2023-03-17

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

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

首先先看成品

废话不多说,直接开始。

首先引入map组件 

<template>
<view class="content">
<map style="width: 100%; height: 90vh;" :layer-style='5'  :style="{height:mapheight}" :show-location='true'  :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale"  @markertap="markertap"   @callouttap='callouttap'>

</map>
</view>
</template>

<script>
export default {
data() {
return {
latitude:23.106574, //纬度
longitude:113.324587,//经度
scale:13,//缩放级别
bottomData:false,
marker: [
{
id:0,
latitude: 23.13065,//纬度
longitude: 113.3274,//经度
iconPath: '',    //显示的图标
rotate:0,   // 旋转度数
width:20,   //宽
height:30,   //高
//   title:'我在这里',//标注点名
alpha:0.5,   //透明度
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'天宝大厦',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:15,//边框圆角
borderWidth:'10',
bgColor:'#e51860',//背景颜色
display:'ALWAYS',//常显
},
},
{
id:1234597,
latitude:  23.106574,//纬度
longitude: 113.324587,//经度
iconPath: '',    //显示的图标
rotate:0,   // 旋转度数
width:20,   //宽
height:30,   //高
//  title:'我在这里',//标注点名
alpha:0.5,   //透明度
//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
//   color:'red',//文本颜色
//      },
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'广州塔',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:15,//边框圆角
borderWidth:'10',
bgColor:'#e51860',//背景颜色
display:'ALWAYS',//常显
},
},
{
id:2,
latitude:  23.1338,//纬度
longitude: 113.33052,//经度
iconPath: '',    //显示的图标
rotate:0,   // 旋转度数
width:20,   //宽
height:30,   //高
alpha:0.5,   //透明度
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'德隆大厦',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:15,//边框圆角
borderWidth:'10',
bgColor:'#e51860',//背景颜色
display:'ALWAYS',//常显
},
},
{
id:3,
latitude:  23.136455,//纬度
longitude: 113.329002,//经度
iconPath: '',    //显示的图标
rotate:0,   // 旋转度数
width:20,   //宽
height:30,   //高
alpha:0.5,   //透明度
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'羊城国际商贸中心',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:15,//边框圆角
borderWidth:'10',
bgColor:'#e51860',//背景颜色
display:'ALWAYS',//常显
},
},
{
id:4,
latitude:  23.224781,//纬度
longitude: 113.293911,//经度
iconPath: '',    //显示的图标
rotate:0,   // 旋转度数
width:20,   //宽
height:30,   //高
alpha:0.5,   //透明度
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'天瑞广场A座',//文本
color:'#ffffff',//文字颜色
fontSize:16,//文本大小
borderRadius:15,//边框圆角
borderWidth:'12',
bgColor:'#e51860',//背景颜色
display:'ALWAYS',//常显
},
},
{
id:5,
latitude:  23.072726,//纬度
longitude: 113.277921,//经度
iconPath: '',    //显示的图标
rotate:0,   // 旋转度数
width:20,   //宽
height:30,   //高
alpha:0.5,   //透明度
callout:{//自定义标记点上方的气泡窗口 点击有效
content:'大米和小米儿童康复(广州盈丰)中心',//文本
color:'#ffffff',//文字颜色
fontSize:14,//文本大小
borderRadius:15,//边框圆角
borderWidth:'8',
bgColor:'#e51860',//背景颜色
display:'ALWAYS',//常显
},
},
],
}
},
onLoad() {

        },
computed:{
mapheight(){
let data =''
if(this.bottomData){
if(this.upTop){
data ='50px'
}else{
data ='200px'
}
}else{
data ='90vh'
}
return data
},
coverbottom(){
let data =''
if(this.bottomData){
data ='20rpx'
}else{
data ='100rpx'
}
return data
}
},
methods:{
//地图点击事件
markertap(e) {
console.log("===你点击了标记点===",e)
},
//地图点击事件
callouttap(e){
console.log('地图点击事件',e)
}
}
}
</script>

 得到的样式是这样

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

定位图标

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

大概是这样的。

<template>
		<view class="page-section page-section-gap map-container">
					<map style="width: 100%; height: 90vh;" :layer-style='5'  :style="{height:mapheight}" :show-location='true'  :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale"  @markertap="markertap"   @callouttap='callouttap'>
						<cover-view class="cover-view" :style='{bottom:coverbottom}' @click="onControltap">
							<cover-image class="cover-image" @click="play" src="@/static/ditudingwei.png"></cover-image>
							<cover-view>
									定位
							</cover-view>
					</cover-view>	
			</map>
		</view>
</template>
<script>
	export default {
		data() {
			return {
						latitude:23.106574, //纬度
						longitude:113.324587,//经度
						scale:13,//缩放级别
						bottomData:false,
						marker: [
											{
											id:0,
											latitude: 23.13065,//纬度
											longitude: 113.3274,//经度
											iconPath: '',    //显示的图标        
											rotate:0,   // 旋转度数
											width:20,   //宽
											height:30,   //高
												//   title:'我在这里',//标注点名
											alpha:0.5,   //透明度
											callout:{//自定义标记点上方的气泡窗口 点击有效  
											content:'天宝大厦',//文本
											color:'#ffffff',//文字颜色
											fontSize:14,//文本大小
											borderRadius:15,//边框圆角
											borderWidth:'10',
											bgColor:'#e51860',//背景颜色
											display:'ALWAYS',//常显
											},
											},
											{
													id:1234597,
													latitude:  23.106574,//纬度
													longitude: 113.324587,//经度
													iconPath: '',    //显示的图标        
													rotate:0,   // 旋转度数
													width:20,   //宽
												height:30,   //高
											//  title:'我在这里',//标注点名
													alpha:0.5,   //透明度
												//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
												//   color:'red',//文本颜色
												//      },
													callout:{//自定义标记点上方的气泡窗口 点击有效  
												content:'广州塔',//文本
												color:'#ffffff',//文字颜色
												fontSize:14,//文本大小
												borderRadius:15,//边框圆角
												borderWidth:'10',
												bgColor:'#e51860',//背景颜色
												display:'ALWAYS',//常显
												},
											},
											{
													id:2,
													latitude:  23.1338,//纬度
													longitude: 113.33052,//经度
													iconPath: '',    //显示的图标        
													rotate:0,   // 旋转度数
						  						width:20,   //宽
													height:30,   //高
													alpha:0.5,   //透明度
											callout:{//自定义标记点上方的气泡窗口 点击有效  
												content:'德隆大厦',//文本
												color:'#ffffff',//文字颜色
												fontSize:14,//文本大小
												borderRadius:15,//边框圆角
												borderWidth:'10',
												bgColor:'#e51860',//背景颜色
												display:'ALWAYS',//常显
												},
											},
												{
													id:3,
													latitude:  23.136455,//纬度
													longitude: 113.329002,//经度
													iconPath: '',    //显示的图标        
													rotate:0,   // 旋转度数
														width:20,   //宽
														height:30,   //高
														alpha:0.5,   //透明度
													callout:{//自定义标记点上方的气泡窗口 点击有效  
													content:'羊城国际商贸中心',//文本
													color:'#ffffff',//文字颜色
													fontSize:14,//文本大小
													borderRadius:15,//边框圆角
													borderWidth:'10',
													bgColor:'#e51860',//背景颜色
													display:'ALWAYS',//常显
													},
												},
											{
													id:4,
													latitude:  23.224781,//纬度
													longitude: 113.293911,//经度
													iconPath: '',    //显示的图标        
													rotate:0,   // 旋转度数
						  						width:20,   //宽
													height:30,   //高
													alpha:0.5,   //透明度
												callout:{//自定义标记点上方的气泡窗口 点击有效  
													content:'天瑞广场A座',//文本
													color:'#ffffff',//文字颜色
													fontSize:16,//文本大小
													borderRadius:15,//边框圆角
													borderWidth:'12',
													bgColor:'#e51860',//背景颜色
													display:'ALWAYS',//常显
												},
												},
											{ 
														id:5,
														latitude:  23.072726,//纬度
														longitude: 113.277921,//经度
														iconPath: '',    //显示的图标        
														rotate:0,   // 旋转度数
												width:20,   //宽
													height:30,   //高
													alpha:0.5,   //透明度
											callout:{//自定义标记点上方的气泡窗口 点击有效  
													content:'大米和小米儿童康复(广州盈丰)中心',//文本
													color:'#ffffff',//文字颜色
													fontSize:14,//文本大小
													borderRadius:15,//边框圆角
													borderWidth:'8',
													bgColor:'#e51860',//背景颜色
													display:'ALWAYS',//常显
												},
												},
										],
			}
			},
		onLoad() {

		},
		computed:{
					mapheight(){
						let data =''
						if(this.bottomData){
							if(this.upTop){
								data ='50px'
							}else{
								data ='200px'
							}
						}else{
							data ='90vh'
						}
						return data
					},
					coverbottom(){
						let data =''
						if(this.bottomData){
							data ='20rpx'
						}else{
							data ='100rpx'
						}
						return data
					}
				},

		methods:{
				//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===",e)
				},
			//地图点击事件
			callouttap(e){
				console.log('地图点击事件',e)
		}
		}
	}
</script>
<style lang='less' scoped>
		.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;
		}
		}
</style>

 获取自身经纬度

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

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

本文结束
本文来自投稿,不代表站三界导航立场,如若转载,请注明出处:https://www.zhansanjie.com/article/details/40296.html

版权声明:

1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

2、本站仅提供信息发布平台,不承担相关法律责任。

3、若侵犯您的版权或隐私,请联系本站管理员删除。

4、本文由会员转载自互联网,如果您是文章原创作者,请联系本站注明您的版权信息。

分享
站三界导航
本站声明:本站严格遵守国家相关法律规定,非正规网站一概不予收录。本站所有资料取之于互联网,任何公司或个人参考使用本资料请自辨真伪、后果自负,站三界导航不承担任何责任。在此特别感谢您对站三界导航的支持与厚爱。