共计 2668 个字符，预计需要花费 7 分钟才能阅读完成。

腾讯位置服务基于微信提供的小程序插件能力，专注于（围绕）地图功能，打造一系列小程序插件，可以帮助开发者简单、快速的构建小程序，是您实现地图功能的最佳伙伴。目前微信小程序插件提供路线规划、地铁图、地图选点等服务，欢迎大家体验！
我们将陆续推出更多功能的插件，敬请期待！

以下内容转载自微信开放社区腾讯位置服务官方文章《手把手教你避开组件 cover-view 的那些坑》
作者：腾讯位置服务
链接: https://developers.weixin.qq….
来源：微信开放社区
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

案例背景：

最近在开发城市地铁图项目，具体功能有规划路线、定位最近地铁站、以及显示整个城市的地铁网状图等功能。根据需求，在实现的时候在地铁线路图上需要添加定位按钮及线路弹框来展示位置信息以及地铁站详情信息。

遇到的问题：

在地铁图调研初期，原计划实现渲染方案是采用 svg 来绘制，但是调研后发现小程序原生 API 不支持 svg。同时，我们在开源中找到一个 svg 的框架库来实现绘制，但是开发初期发现遇到很多无法实现的需求和性能问题。在对开源库的代码跟踪后，发现绘制方案也是 canvas 的方式，于是我们决定使用原生 canvas 的方案来支持地铁图。但是呢，又遇到一些问题，那么我们来看看几个具体的点：

1) view 在 canvas 上无法正常显示。

在 canvas 上使用 view 来添加图片和弹框时，发现图片以及弹框在 canvas 的下面，不能正常显示图片。

查看文档发现 canvas、map、video 等原生组件使用的是 native 实现的，默认显示在小程序的最上层，所以就把 view 换成 cover-view 或者 cover-image。

使用 view 效果：

<!-- 线路 -->
<view class = "sublines sublines-icon">
<image class = 'sublinesIcon' src = "/static/img/ic_sublines.png" bindtap = 'clickSublines' wx-if = "{{lineIconShow}}" ></ image > 
</view>

替换成 cover-view 效果：

<!-- 线路 -->
<cover-view class = "sublines sublines-icon">
<cover-image class = 'sublinesIcon' src = "/static/img/ic_sublines.png" bindtap = 'clickSublines' wx-if ="{{lineIconShow}}"></cover-image>
</cover-view>

但是使用 cover-view 又遇到了层级和样式的问题。

2）canvas 上使用 cover-image 添加图片，图片设置 position：absolute；页面上的图片显示在 canvas 画线的下方，导致定位按钮不能正常使用。后来把 position 该换成 fixed 解决来层级的问题。效果如下所示：

.locationIcon {
    width: 3rem;
    height: 3rem;
    position: fixed;
    bottom: 3rem;
    left: 0.7rem;
}

3）在页面上实现一个弹框时，根据 UI 图需要实现一个底边线和底边小三角形。通过 border 给块级元素设置底边线或者 css 实现三角箭头，单边 border 设置无效。最终采用了 height 为 1px 的 cover-view 或者图片来代替。

设置单边 border 效果：

<!-- 起终点设置弹框 -->
<cover-view class =  "sdMark"  style =  'top:{{tapClient.y}}px;left:{{tapClient.x}}px;'  wx-if  =  "{{sdMarkShow}}">
    <cover-view class = 'sdMarkContent'>
        <cover-view class = 'sdMarkItem' bindtap = 'clickStart'> 设为起点 </cover-view>
        <cover-view class = 'sdMarkItem' bindtap = 'clickEnd' > 设为终点 </cover-view>
        <cover-view class = 'sdMarkItem' bindtap = 'clickStationDetail'> 站点详情 </cover-view>
    </cover-view>
</cover-view>

修改后的代码：

<!-- 起终点设置弹框 -->
<cover-view class = "sdMark" style = 'top:{{tapClient.y}}px;left:{{tapClient.x}}px;' wx-if = "{{sdMarkShow}}">
    <cover-view class = 'sdMarkContent'>
        <cover-view class = 'sdMarkItem' bindtap = 'clickStart'> 设为起点 </cover-view>
        <cover-view class = 'line'></cover-view>
        <cover-view class = 'sdMarkItem' bindtap = 'clickEnd'> 设为终点 </cover-view>
        <cover-view class = 'line'></cover-view>
        <cover-view class = 'sdMarkItem' bindtap``= 'clickStationDetail'> 站点详情 </cover-view>
    </cover-view>
    <cover-view class = "icon">
        <cover-image class = 'icArrow' src = '/static/img/ic_arrow.png'></cover-image>
    </cover-view>
</cover-view>

最终的效果：

踩坑总结：canvas 层级较高，使用 cover-view 或者 cover-image 在 canvas 做操作。单边 border 相关的操作使用图片或者块级元素来代替。

查看相关 API 文档：

cover-view 相关文档：
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

欢迎体验和吐槽：” 腾讯位置服务 - 地铁图 ” 插件：
https://lbs.qq.com/miniprogram_plugin/subway.html

手把手教你避开组件coverview的那些坑