微信小程序cover-view的使用

如果大家已经学会了如何在小程序上配置地图，那么不妨再看一看这篇文章，有很多场景是需要在地图上再覆盖一些内容的 这些内容往往是可跳转的，这里我就不给大家讲解跳转了，重点给大家讲一下如何在微信小程序地图之上覆盖你想要的东西！

想要在原生组件上覆盖东西就要用到cover-view，或者cover-image，没错一个包裹内容，一个包裹图片，且cover-view、cover-image必须嵌套在组件内部使用，

如下所示：

<view class="container">
    <map id="aroundMap"
             style="width: 100%;height:100%;"
             markers="{{markers}}"
             scale="{{scale}}"
             bindmarkertap="markertap"
             latitude="{{latitude}}"
             longitude="{{longitude}}"
             bindregionchange="regionchange"
             show-location>

        <cover-view class="current-postion">
            <cover-image class="comments-img icon-current" bindtap="commentDetail"
                                     src="./../../images/icon/comment.png"></cover-image>
            <cover-image class="search-img icon-current" bindtap="searchFilter"
                                     src="./../../images/icon/map-search.png"></cover-image>
            <cover-image class="position-img icon-current" bindtap="moveToCurrent"
                                     src="./../../images/icon/position.png"></cover-image>
        </cover-view>
        <cover-view class="current-postion1">
            <cover-image class="position-img icon-position point-bg {{isColor?'changeColor':'position-img'}}"
                                     src="{{isColor?'./../../images/icon/point-active.png': './../../images/icon/point.png'}}"
                                     bindtap="filterAround"
                                     data-filed="point"></cover-image>
            <cover-view class="pointShop">网点</cover-view>
            <cover-image class="position-img icon-position point-bg {{isColor?'changeColor':'position-img'}}"
                                     src="{{isColor?'./../../images/icon/shop.png':'./../../images/icon/shop-active.png'}}"
                                     bindtap="filterAround"
                                     data-filed="discounts">商家
            </cover-image>
            <cover-view class="pointShop">商家</cover-view>
        </cover-view>
    </map>

我在map组件里包裹了cover-view和cover-image（特别强调cover-view、cover-image放在组件之外不生效）

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

最后附效果图一张：

cover-view_image.png

@@样式我就不放了，调整大小正常布局就行，默认就是覆盖在map之上的=======