1、map组件详解

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

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

2、覆盖物展示

// 获取当前手机的系统
	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,
				}
			}
			}
		})
	}

3、地图宽高计算

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

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

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

<view class="map" :style="{height:`calc(100vh - ${mapHeight}rpx)`}">
				<map style="width: 100%;height: 100%;" :latitude="oilList[0].lat" :longitude="oilList[0].lon" :markers="oilList" @tap="mapTap" @callouttap="markertap"  id="map">
					<cover-view slot="callout">
					 </cover-view>
				</map>
			</view>