uniapp中，使用高德地图，进行登录地址，进行跳转到指定的位置

思路是：求一个中心点，以这个中心点当作定位的位置，首先声明经纬度和中心点，循环数组中的所有数据，求出整个数组中的经纬度，然后经度中心点=所有经度/数组的长度；纬度中心点=所有纬度/数组的长度

uniapp中，高德地图的引入使用，使用卫星图，创建的文件是nvue后缀

<template>
	<view class="holePage" style="width: 100%;">
			<map :latitude="latitude" class="mapView" :longitude="longitude"  :enable-satellite="true" :markers="markers" :scale="scale" @markertap="clickCurrentMarker"></map>
			//这是一个弹框，点击出现弹框内容信息
			<Modal v-if="showInfoModal" @hidden="hiddenShow" :curTreeId="curTreeId"/>
	</view>
</template>

<script>
import http from '../../utils/http.js';
import Modal from './treeInfoModal.nvue';
export default {
	data() {
		return {
			latitude: 0,
			longitude: 0,
			scale:7,//缩放比例
			curTreeId: -1,
			data_markers: [],
			markers: [],
			cenerPoint:"",
			showInfoModal: false,
			mapHeight: ''
			
		};
	},
	components: { Modal },
	computed: {
		// markers(){
		// 	return this.data_markers
		// }
	},
	onLoad() {
		let that = this;
		//给经纬度第一个赋值，可以准时定位到当前的位置，因为，我要展示区域的详情内容，所以，注释掉了，直接用下面赋值的经纬度
		// uni.getLocation({
		// 	success(res) {
		// 		that.latitude = res.latitude;
		// 		that.longitude = res.longitude;
		// 	}
		// });
		this.setTreeMerkers();
	},
	methods: {
		//点击图标显示
		clickCurrentMarker(e) {
			this.showInfoModal = true;
			this.curTreeId = e.detail.markerId;
			// console.log(e, 'opop');
		},
		//隐藏
		hiddenShow() {
			this.showInfoModal = false;
		},
		//所有树的展示
		setTreeMerkers() {
			// this.$nextTick(()=>{
			let that = this;
			uni.showLoading({});
			let opts = {
				url: 'tree'
			};
			let data = {
				page: 0
			};
			http.HttpRequest(opts, data).then(res => {
				// console,login(res,"uuu")
				//思路是：求一个中心点，以这个中心点当作定位的位置，首先声明经纬度和中心点，循环数组中的所有数据，求出整个数组中的经纬度，然后经度中心点=所有经度/数组的长度；纬度中心点=所有纬度/数组的长度
				var lat = 0;
				var lon = 0;
				var centerPointLat = 0;
				var centerPointLon = 0;
				for (let i = 0; i < res.data.length; i++) {
					let item = res.data[i];
					let currentInfo = {
						id: item.id,
						title: item.name,
						latitude: item.geo_latitude,
						longitude: item.geo_longitude,
						// iconPath: '/static/treeLocal.png'
						iconPath: '/static/mapLocation.png'
					};
					
					that.data_markers.push(currentInfo);
					lat += item.geo_latitude;
					lon += item.geo_longitude;
				}
				that.markers = this.data_markers;
				centerPointLat = lat / (that.markers.length);
				centerPointLon = lon / (that.markers.length);
				that.latitude = centerPointLat;
				that.longitude = centerPointLon;
				uni.hideLoading();
			});
			// })
		}
	}
};
</script>

<style>
.mapView {
	width: 750rpx;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
}
.infoModal {
	width: 200rpx;
	height: 200rpx;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50% -50%);
	z-index: 10000;
}
</style>