uniapp + vue3微信小程序开发（6）地图展示

在用小程序地图时，我们基本都会用默认的map组件，然后这组件会跟你手机默认内置地图有关，一般都是微信地图

1、map组件详解

 其实我们常用的就那么几个，latitude：当前地图的纬度，longitude：当前地图的经度，很多时候我们都会调用 uni.getLocation 来获取我们当前经纬度位置，markers 为覆盖物列表，@tap事件为地图事件，@callouttap为覆盖物事件

但是我们在使用覆盖物时，需要注意，安卓端，ios端，开发工具客户端显示的都有所区别哦

2、覆盖物展示

既然根据系统展示有所区分，那么我们就要一进路由，就要先进行判断，大概来说，安卓机和微信开发工具上都是展示差不多的，只有ios机区别很大

// 获取当前手机的系统
	const phoneType = ()=>{
	  uni.getSystemInfo({
			success(res) {
				// res.platform - 客户端平台，值域为：ios、android、mac（3.1.10+）、windows（3.1.10+）、linux（3.1.10+）
				// 苹果手机的数字使用callout，安卓的数字使用label
				if (res.platform == 'ios') {
					filterOilmap('callout')
				} else {
					filterOilmap('customCallout')
				}
			}
		})
	}

const filterOilmap = (e)=>{
	  oilList.value = oilList.value.map((item,index) =>{
			if(e == 'callout'){
			return	{
				...item,
				iconPath: '/static/img/oil-site-active.png',
				width: 32,
				height: 32,
				[e]: {
					content: item.name,
					anchorY: 30,
					anchorX: 0,
					display: 'ALWAYS',
				}
			}
			}else{
			return	{
				...item,
				iconPath: '/static/img/oil-site.png',
				[e]: {
					anchorY: 30,
					anchorX: 0,
					display: 'ALWAYS',
				}
			}
			}
		})
	}

开发工具展示截图：

 ios真机截图： 

3、地图宽高计算

小程序涉及到dom宽高计算，总是麻烦的，我们想让当前页面的剩余高度来都展示地图，应该怎么做呢？

uni.createSelectorQuery().select(".map").boundingClientRect(data => {
		mapHeight.value =  (data.top*2)+40
}).exec();

我们在一进来，就计算要展示的高度，然后组件如下，用100vh减去我们地图dom当前的距离顶部的高度：