地图定位功能

这里介绍的是App端，使用的是nvue页面

<template>
	<!-- App地图 -->
	<view class="cont" :style="[{width: windowWidth+'px'},{height: windowHeight+'px'}]">
		
		<map class="cont_map" id="map" :style="[{width: windowWidth+'px'},{height: windowHeight+'px'}]" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers">
			<cover-view class="cover-view" @click="positions" >
				<cover-image class="cover-image" @click="positions"  src="../../static/position_icon.png"></cover-image>
				<cover-view @click="positions"  style="">定位</cover-view>
			</cover-view>
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 22.6015600, //维度
				longitude: 113.8536894, //经度
				scale: 13, //缩放级别
				windowWidth:0,
				windowHeight:0,
				// 配置显示点，有多个就配置多个
				covers: [{
						id: 1,
						latitude: 22.6015600, //维度
						longitude: 113.8536894, //经度
						rotate: 0, // 旋转度数
						width: 30, //宽
						height: 30, //高
						iconPath: '/static/map_icon.png', //显示的图标
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: '定位车辆', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					}
					// , {
					// 	latitude: 39.90,//经度
					// 	longitude: 110.39,//维度
					// 	iconPath: '/static/map_icon.png',//显示的图标
					// },
				]
			}
		},
		onLoad() {
			let pixe = uni.getWindowInfo()
			this.windowWidth = pixe.windowWidth
			this.windowHeight = pixe.windowHeight
			console.log()
		},
		methods: {
			// 回到定位点
			goBackToLocation() {
				uni.createMapContext("map", this);
				// uni.createMapContext("map").moveToLocation({34.7486, 113.6709});
			},
			// 定位到当前地图上显示的坐标
			positions() {
				const that = this;
				uni.createMapContext("map", this).moveToLocation({   //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
				        latitude: this.latitude,
				        longitude: this.longitude,
					}); 
			},
			// 导航当前坐标
			openload(){
				const that = this;
				uni.openLocation({
					latitude: that.latitude, //要去的纬度-地址       
					longitude: that.longitude, //要去的经度-地址
					// name: '目的地', //地址名称
					// address: '目的地', //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cover-view {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		width: 80rpx;
		height: 120rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		.cover-image {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>