小程序使用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',
})
}
},
![解决C++ 遇笔试题输入[[1,2,3,...,],[5,6,...,],...,[3,1,2,...,]]问题](https://img-blog.csdnimg.cn/cf5ef861771746f1997b82e7b856e2f3.png)
