uniapp中map组件的详细总结，含文字气泡、点击定位等（附全部源码）

目录

1.前言总结

2.技术介绍和实现结果

---

1.前言总结

本篇文章讲的是uniapp中map组件的详细总结，包括本人在开发阶段遇到的一些问题，也算是记了一次笔记，希望对大家有所帮助。

map组件仅用于展示地图，而定位API只是获取坐标，使用map组件的时候一般都要配合uniapp的定位API(uni.getLocation)一起使用

2.技术介绍和实现结果

首先看成品：

 map组件的属性和回调比较多，在这里就不一一介绍了，大家可以移步unapp官网进行查看

下面直接给大家上全部的详细源码（可直接复制使用）：

<template>
	<view>
		<view class="map-container">
			<map style="width: 100%; height: 90vh;" :show-location='true' ref="map" id="map" :latitude="latitude"
				:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
				<cover-view class="cover-view" :style=''>
					<cover-view @click="refresh">
						<cover-image class="cover-image" src="/static/home/shuaxin.png"></cover-image>
						<cover-view>刷新</cover-view>
					</cover-view>
					<cover-view style="margin-top: 20rpx;" @click="onControltap">
						<cover-image class="cover-image" src="/static/home/dingwei.png"></cover-image>
						<cover-view>定位</cover-view>
					</cover-view>

				</cover-view>
			</map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 12, //缩放级别
				marker: [{
						id: 0,
						latitude: 34.79977, //纬度
						longitude: 113.66072, //经度
						iconPath: '/static/home/Path.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 20, //高
						// title: '我在这里', //标注点名
						// alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '智能指挥管理郑州项目金水区纪检委', //文本
							color: '#ffffff', //文字颜色
							fontSize: 15, //文本大小
							borderRadius: 15, //边框圆角
							padding: '10',
							bgColor: '#406390', //背景颜色
							display: 'ALWAYS', //常显
						}
					},
					{
						id: 1,
						latitude: 34.81977, //纬度
						longitude: 113.658072, //经度
						iconPath: '/static/home/Path.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 20, //高
						// title: '我在这里', //标注点名
						// alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '郑州海洋馆', //文本
							color: '#ffffff', //文字颜色
							fontSize: 15, //文本大小
							borderRadius: 15, //边框圆角
							padding: '10',
							bgColor: '#406390', //背景颜色
							display: 'ALWAYS', //常显
						}
					}, {
						id: 2,
						latitude: 34.787774, //纬度
						longitude: 113.699542, //经度
						iconPath: '/static/home/Path.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 20, //高
						// title: '我在这里', //标注点名
						// alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '苏荷中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 15, //文本大小
							borderRadius: 15, //边框圆角
							padding: '10',
							bgColor: '#406390', //背景颜色
							display: 'ALWAYS', //常显
						}
					}, {
						id: 3,
						latitude: 34.82977, //纬度
						longitude: 113.658072, //经度
						iconPath: '/static/home/Path.png', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 20, //高
						// title: '我在这里', //标注点名
						// alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '郑州海洋馆', //文本
							color: '#ffffff', //文字颜色
							fontSize: 15, //文本大小
							borderRadius: 15, //边框圆角
							padding: '10',
							bgColor: '#406390', //背景颜色
							display: 'ALWAYS', //常显
						}
					},
				],

			}
		},
		onReady() {

		},
		computed: {},
		onLoad() {

		},
		onShow() {
			this.getLocation()
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.latitude = res.latitude
						this.longitude = res.longitude
					}
				});
			},
			refresh() {
				this.getLocation()
				console.log('刷新');
				//后期这里可加入调用请求接口的方法，用来实现刷新
			},
			//定位
			onControltap() {
				this.getLocation()
				uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
					latitude: this.latitude,
					longitude: this.longitude,
				});
				console.log('定位');
			},
			//地图点击事件
			markertap(e) {
				console.log("你点击了标记点", e)
				uni.showModal({
					title: '提示',
					content: '地图点击事件，标记点'
				})
			},
			//地图点击事件
			callouttap(e) {
				console.log('你点击了气泡标签', e)
				uni.showModal({
					title: '提示',
					content: '地图点击事件，气泡标签'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.map-container {
		margin-top: -40rpx;
		position: relative;
		overflow: hidden;
		border-radius: 50rpx 50rpx 0 0;

		.cover-view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			/* width: 80rpx;
			height: 160rpx; */
			padding: 42rpx 22rpx;
			color: #4F575F;
			font-weight: 400;
			background-color: #fff;
			background-size: 120rpx 120rpx;
			background-position: center center;
			position: absolute;
			top: 150rpx;
			right: 32rpx;
			border-radius: 15rpx;


		}

		.cover-image {
			display: inline-block;
			width: 50rpx;
			height: 50rpx;

		}
	}
</style>

这个组件的实现前提是要拿到自身的经纬度，这就需要用到uni.getlocation()方法，使用uni.getlocation()方法需要进行一些配置，分别是一下几个方面：

（1）配置小程序的appid

如果没有配置小程序appid的要配置一下，以下两种方法都可以实现。

 ​​​​​​​

 

（2）微信小程序位置权限接口

在app.json中配置一下代码

"permission": {
		"scope.userLocation": {
			"desc": "你的位置信息将用于小程序位置接口的效果展示"
		}
	},

在manifest.json中打开微信小程序位置接口权限

 做好以上配置，就可以获取自身的经纬度了

 

 获取到经纬度，将它赋值给map组件的属性，就可以得到自身的坐标了，然后使用以下方法就可以实现拖拽之后，点击定位返回自身所在位置

//定位
			onControltap() {
				this.getLocation()
				uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
					latitude: this.latitude,
					longitude: this.longitude,
				});
				console.log('定位');
			},

本期的总结就到这里了，可能有些方面的讲的不够详细，不懂得可以评论区留言或者私信，看到必回。谢谢大家得观看。