微信小程序，map地图中在底部添加半透明视图布局

最近在学习微信小程序，遇到一个问题，就是需求map上需要添加其他布局，但是map是由客户端创建的原生组件，层级是最高的，研究了好久，发现在map中可以使用cover-view组件，然后进行布局，有关cover-view的具体使用，详见https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html，这里简单说明一下使用

wxml文件

< map id = "map4select"

longitude = "{{longitude}}" latitude = "{{latitude}}"

markers = "{{markers}}"

scale = '18'

style = "width:{{map_width}}px;height:{{map_height}}px"

bindregionchange = "regionchange"

controls = "{{controls}}"

circles = '{{circlesData}}'

>

< cover-view class = 'topinfobg'>

< cover-view class = 'topinfocolumn'>

< cover-view class = 'topinfotext'> {{markers[0].name}} </ cover-view >

< cover-view class = 'topinfotext'> 距离您{{distance}}米 </ cover-view >

</ cover-view >

< cover-view class = 'lineone'></ cover-view >

< cover-view class = 'topinfocolumn'>

< cover-view class = 'topinfotext'> 今日 </ cover-view >

< cover-view class = 'topinfotext'> {{timecard}} </ cover-view >

</ cover-view >

</ cover-view >

</ map >

具体使用可以在程序中运行一下看看实体效果，
效果图大概如下所示，底部为半透明布局，显示一下信息可以：