map组件轨迹，定位，导航，定位点遮罩

小程序使用map组件实现轨迹，定位，导航，定位点遮罩

map组件常用属性说明，

看着还要自己研究写 我们立志成为cv工程师 直接上代码！！！

<template>
	<map id="map" class="map" :show-location="true" :longitude="centerLng" :latitude="centerLat" :scale="scale"
			:markers="markers" :circles="circles" :polyline="polyline" @updated="handleMapUpdate">
			</template>


:longitude="centerLng" //标记点经纬度
:latitude="centerLat" //标记点经纬度
:markers="markers"//标记点花样
:polyline="polyline"//轨迹

//定义变量自己的写名字吧
data(){
return{
	}
},

新增地图多个点需要显示

//跟methods同级
		onReady() {
			setTimeout(() => {
				this._mapContext = uni.createMapContext("map", this);
				// 
				// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
				// 设置地图缩放是否聚合
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 1000,
					complete(res) {
						console.log('initMarkerCluster', res)
					}
				});

				this._mapContext.on("markerClusterCreate", (e) => {
					console.log("markerClusterCreate", e);
				});

				this.addMarkers();
			}, 1500)
		},
// 地图
			async addMarkers() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				await this.handleGetMapList()//获得标记点经纬度
				await this.handleGetPhoenCore()//判断手机类型
				const markers = []
				this.positions.forEach((p, i) => {
					markers.push(
						Object.assign({}, {
							id: Number(i + 1),
							iconPath: p.state == 1 ? that.img1 : that.img2,
							width: 40,
							height: 40,
							bgColor: 'white',
							zIndex: Number(199),
							// joinCluster: false, // 指定了该参数才会参与聚合,
							callout: {
								id: Number(i + 1),
								display: 'ALWAYS',
								width: 40,
								height: 40,
								padding: that.isIOS ? 2.1 : 5,
								borderRadius: 25,
								bgColor: p.state == 1 ? '#00c187' : '#cdcdcd',
								color: '#ffffff',
								border: '1px solid #ffffff',
								anchorX: 9,
								anchorY: that.isIOS ? 13 : 11,
								textAlign: "center",
								content: JSON.stringify(p.high_voltage_counts)
								// content: '99'
							},
							label: {
								width: 18,
								height: that.isIOS ? 18 : 22,
								// borderWidth: 1,  
								borderRadius: 25,
								bgColor: p.state == 1 ? '#00c187' : '#cdcdcd',
								color: '#fff',
								border: '1px solid #fff',
								anchorX: -14,
								anchorY: that.isIOS ? -45 : -52,
								content: JSON.stringify(p.low_voltage_counts)
								// content: '99'
							}
						}, p)
					)
				})
				that.mapList = markers
				// console.log(that.mapList,'33333')
				this._mapContext.addMarkers({
					markers,
					clear: false,
					// scale:60,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
			// 获取手机内核 调整不兼容问题
			handleGetPhoenCore() {
				uni.getSystemInfo({
					success: (res) => {
						// this.systemInfo = res
						// console.log("所获取设备数据皆来自设备本身 by kuiwaiwai")
						console.log('获取手机内核', res)
						console.log(res.osName == 'ios')
						if (res.osName == 'ios') {
							this.isIOS = true
							console.log(this.isIOS)
						}
					}
				})
			},

1，定位遮蔽罩

<script>
// 在地图渲染更新完成时触发
handleMapUpdate(e) {
				// 在地图缩放时更新圆形遮罩和标记点的位置
				if (e.type === 'end' && e.causedBy === 'scale') {
					this.circles = [];
					this.markers = [];
					this.polyline = [];
					// this.getCenterPosition()
					// this.drawCircle();
					this.drawMarkers();
					this.drawPolyline();
				}
			}
//定位
drawMarkers() {
				console.log(this.centerLng, '经纬度')
				console.log(this.centerLat, '经纬度')
				// 在标记点数组中添加中心点标记点对象
				this.markers.push({
					id: 1, // 标记点唯一ID
					longitude: this.centerLng, // 标记点经度
					latitude: this.centerLat, // 标记点纬度
					title: '中心点', // 标记点标题
					iconPath: '/static/image/mark.png', // 标记点图标路径
					width: 30 + 'rpx', // 标记点图标宽度，使用相对单位rpx
					height: 30 + 'rpx', // 标记点图标高度，使用相对单位rpx
				});
				//在地图上就显示出来接口给的经纬度
			},
			// 这个和上一个方法冲突二选一  绘制起点到终点二个点的轨迹
	drawMarkers() {
				// 在标记点数组中添加中心点标记点对象
				// this.markers.push({
				// 	id: 1, // 标记点唯一ID
				// 	longitude: this.centerLng, // 标记点经度
				// 	latitude: this.centerLat, // 标记点纬度
				// 	title: '中心点', // 标记点标题
				// 	iconPath: '/static/image/mark.png', // 标记点图标路径
				// 	width: 30 + 'rpx', // 标记点图标宽度，使用相对单位rpx
				// 	height: 30 + 'rpx', // 标记点图标高度，使用相对单位rpx
				// });

				// 添加起点标记点对象
				this.markers.push({
					id: 2, // 起点标记点唯一ID
					longitude: this.polyline[0].longitude, // 起点经度
					latitude: this.polyline[0].latitude, // 起点纬度
					title: '起点', // 起点标题
					iconPath: '/static/image/marpq.png', // 起点图标路径
					width: 80 + 'rpx', // 终点图标宽度，使用相对单位rpx
					height: 80 + 'rpx', // 终点图标高度，使用相对单位rpx
				});

				// 添加终点标记点对象
				const lastIndex = this.polyline.length - 1;
				this.markers.push({
					id: 3, // 终点标记点唯一ID
					longitude: this.polyline[lastIndex].longitude, // 终点经度
					latitude: this.polyline[lastIndex].latitude, // 终点纬度
					title: '终点', // 终点标题
					iconPath: '/static/image/markz.png', // 终点图标路径
					width: 80 + 'rpx', // 终点图标宽度，使用相对单位rpx
					height: 80 + 'rpx', // 终点图标高度，使用相对单位rpx
				});
			},
	//遮蔽罩
		drawCircle() {
				// 获取地图当前视图的宽高定位处于遮蔽罩的中心 看着有点偏 实际是中心点 
				uni.createSelectorQuery()
					.select('#map')
					.boundingClientRect(async (res) => {
						// 圆心位置为地图视图中心点
						const centerX = res.width / 2;
						const centerY = res.height / 2;

						// // 绘制圆形遮罩
						const circle = {
							latitude: this.centerLat, // 圆心纬度
							longitude: this.centerLng, // 圆心经度
							color: '#54C3FF',
							// 填充颜色
							fillColor: '#58d0eb6a',//注意格式格式 ！！！！！！！！！！！！！
							borderColor: '#58d0eb6a',//注意格式格式 ！！！！！！！！！！！！！
							borderWidth: 0,
							radius: Math.min(res.width, res.height) / 4, // 半径为地图视图宽高的四分之一
							strokeWidth: 0 // 边框宽度
						};
						this.circles.push(circle);

						// 更新标记点的位置为圆心
						this.markers[0].left = centerX - 15;
						this.markers[0].top = centerY - 15;
					})
					.exec();
			},
</script>

2，上面二步奏我没传入经纬度 在地图上展示如下

3，轨迹

// 在地图渲染更新完成时触发
handleMapUpdate(e) {
				// 在地图缩放时更新圆形遮罩和标记点的位置
				if (e.type === 'end' && e.causedBy === 'scale') {
					this.circles = [];
					this.markers = [];
					this.polyline = [];
					// this.getCenterPosition()
					// this.drawCircle();
					this.drawMarkers();
					this.drawPolyline();
				}
			}
	// 绘制行动路线
drawPolyline() {
				// 绘制行动路线
				const polyline = {
					points: JSON.parse(JSON.stringify(this.polyline)),
					color: '#ff0000', // 线路颜色
					width: 2 // 线路宽度
				};
				this.polyline.push(polyline);
				console.log(this.polyline)
			},
	

导航

	toMapAPP() {
				if (that.centerLat != '' && that.centerLng != '') {
					let that = this
					// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
					uni.getSetting({
						success: (res) => {
							// 如果没有授权
							if (!res.authSetting['scope.userLocation']) {
								// 则拉起授权窗口
								uni.authorize({
									scope: 'scope.userLocation',
									success: () => {
										//如果授权了
										const latitudes = that.centerLat
										const longitudes = that.centerLng
										const address = that.address
										uni.openLocation({
											latitude: parseInt(latitudes), //到达的纬度
											longitude: parseInt(longitudes), //到达的经度
											name: address, //到达的名字
											scale: 12,
											success() {
												console.log('success')
											}
										})
									},
									fail(error) {
										//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
										console.log('拒绝授权', error)

										uni.showModal({
											title: '提示',
											content: '若点击不授权，将无法使用位置功能',
											cancelText: '不授权',
											cancelColor: '#999',
											confirmText: '授权',
											confirmColor: '#f94218',
											success(res) {
												console.log(res)
												if (res.confirm) {
													// 选择弹框内授权
													uni.openSetting({
														success(res) {
															console.log(res
																.authSetting)
														}
													})
												} else if (res.cancel) {
													// 选择弹框内 不授权
													console.log('用户点击不授权')
												}
											}
										})
									}
								})
							} else {
								console.log('有授权');
								console.log(that.centerLat, that.centerLng)
								// 有权限则直接获取
								uni.getLocation({
									type: 'wgs84',
									success: (res) => {
										const latitudes = that.centerLat
										const longitudes = that.centerLng
										const address = that.address
										uni.openLocation({
											latitude: parseInt(latitudes), //到达的纬度
											longitude: parseInt(longitudes), //到达的经度
											name: address, //到达的名字
											scale: 12,
											success: (res) => {
												console.log('success', )
											},
											fail: (err) => {
												console.log('err', err)
											}
										})
									},
									fail(error) {
										uni.showToast({
											title: '请勿频繁调用！',
											icon: 'none',
										})
										console.log('失败', error)
									}
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: '暂无信息',
						icon: 'none',
					})
				}

			},