uniapp小程序使用地图 并且渲染坐标点 点击坐标点弹出对应的信息

实现效果展示：

 

<template>
	<view class="map">
        <!-- subkey是在微信小程序官网申请的地图样式，比如申请黑暗系，会给一个key值，放在这里 -->
		<map subkey="Q6YBZ-XXXXX-C6UXD-XXXXX-SNFZ2-XXXXX" name="myMap" :longitude="mapCenter.longitude"
			:latitude="mapCenter.latitude" :markers="markers" @markertap="handleMarkerTap" enable-3D></map>
		<view class="bulletBox" v-if="closeShow">
			<view class="center">
				<view class="centers">
					<view style="color:#B2C7CE !important;font-size: 32rpx;display: flex;align-items: center;">
						<view>当前水位高度：</view>
						<view style="color: #9CEDF8;font-family: digifaw;font-size: 38rpx;">36.52</view>
						<view style="margin-left: 10rpx;">m</view>
					</view>
					<view class="echarts">
						<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
					</view>
					<view class="video">
						<video style="width: 100%;height:100%;border: 3rpx solid #7cbcc1;" controls autoplay
							src="https://haokan.baidu.com/5f6b3f0d-bcf3-44a9-800f-d0674189d876"></video>
					</view>
				</view>
				<img class="box" src="https://test.shipgroup.net/jd/img/box.png" alt="">
				<img @tap="close" class="clouse" src="https://test.shipgroup.net/jd/img/clouse.png" alt="">
			</view>
		</view>
	</view>
</template>
  
<script>
export default {
	data() {
		return {
			mapCenter: {
				longitude: "",
				latitude: "",
			},
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				title: {
					color: '#fff'
				},
				color: ["#9CEDF8", "#9CEDF8", "#9CEDF8", "#9CEDF8", "#9CEDF8", "#9CEDF8", "#9CEDF8", "#9CEDF8", "#9CEDF8"],
				padding: [15, 15, 0, 0],
				dataLabel: false,
				dataPointShape: false,
				enableScroll: false,
				legend: {
					color: '#fff'
				},
				xAxis: {
					disableGrid: true,
					fontColor: '#ffffff'
				},
				yAxis: {
					name: '单位：毫米',
					nameTextStyle: {
						color: '#fff',
						fontSize: 14
					},
					labels: {
						fontColor: '#fff'
					},
					gridType: 'dash',
					dashLength: 2,
					data: [{
						min: 0,
						max: 150
					}]
				},
				extra: {
					line: {
						type: "curve",
						width: 2,
						activeType: "hollow",
						linearType: "custom",
						onShadow: true,
						animation: "horizontal"
					}
				}
			},
			closeShow: false,
			markers: []
		};
	},
	mounted() {
		this.getMarkers();
	},
	methods: {
		// 获取地图点位
		getMarkers() {
			let markesData = [
				{
					id: 1,
					longitude: 116.39748,
					latitude: 39.90882,
					iconPath: '/static/swjc.png',
					width: 40,
					height: 100,
					callout: {
						content: '首都机场',
						fontSize: 14,
						borderRadius: 5,
						bgColor: '#ffffff',
						padding: 6,
						textAlign: 'center'
					}
				},
				{
					id: 2,
					longitude: 116.39404,
					latitude: 39.90399,
					iconPath: '/static/dbsb.png',
					width: 40,
					height: 100,
					callout: {
						content: '人民广场',
						fontSize: 14,
						borderRadius: 5,
						bgColor: '#ffffff',
						padding: 6,
						textAlign: 'center'
					}
				}
			]
			this.markers = markesData
			this.mapCenter = {
				longitude: this.calculateCenter(markesData).longitude,
				latitude: this.calculateCenter(markesData).latitude,
			}
			console.log(666666, this.mapCenter);
		},
		// 计算地图的中心点
		calculateCenter(markesData) {
			var sumLongitude = 0;
			var sumLatitude = 0;
			for (var i = 0; i < markesData.length; i++) {
				sumLongitude += markesData[i].longitude;
				sumLatitude += markesData[i].latitude;
			}
			var averageLongitude = sumLongitude / markesData.length;
			var averageLatitude = sumLatitude / markesData.length;
			return {
				longitude: averageLongitude,
				latitude: averageLatitude
			};
		},
		close() {
			this.closeShow = false
		},
		handleMarkerTap(event) {
			console.log('经度：', event)
			console.log('纬度：', event)
			this.closeShow = true
			this.echartsShow()
		},
		echartsShow() {
			this.getServerData();
		},
		getServerData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["12:00", "12:10", "12:20", "12:30", "12:40", "12:50"],
					series: [
						{
							name: "降水量",
							linearColor: [
								[
									0,
									"#a8d4de"
								],
								[
									0.25,
									"#a8d4de"
								],
								[
									0.5,
									"#a8d4de"
								],
								[
									0.75,
									"#a8d4de"
								],
								[
									1,
									"#a8d4de"
								]
							],
							setShadow: [
								3,
								8,
								10,
								"#a8d4de"
							],
							data: [15, 45, 15, 45, 15, 45]
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		},

	}
};
</script>
  
<style>
@font-face {
	font-family: 'digifaw';
	src: url('../../static/font/digifaw.ttf') format('woff2'),
		url('../../static/font/digifaw.ttf') format('woff');
	font-weight: normal;
	font-style: normal;
}

.map,
map {
	width: 100%;
	height: 100vh;
}

.bulletBox {
	position: fixed;
	z-index: 999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	height: 80%;
}

.center {
	position: relative;
	width: 100%;
	height: 100%;
}

.centers {
	position: absolute;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	top: 70rpx;
	bottom: 90rpx;
	left: 60rpx;
	right: 60rpx;
	z-index: 9999999;
}

.box {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.clouse {
	position: absolute;
	width: 56rpx;
	height: 56rpx;
	right: 0;
	top: -70rpx;
}

.echarts {
	width: 100%;
	height: 380rpx;
}

.video {
	width: 99%;
	height: 328rpx;
	box-sizing: border-box;
}
</style>