因项目需要，以map为背景，上面悬浮有其他组件。微信开发者工具测试时一切正常，但是真机测试时地图组件却把所有的组件覆盖，检查z-index设置，一切正常，地图组件层级也在这些组件的下面，为什么会被覆盖呢？

查小程序官方文档，官方文档表示，map组件层级最高无法用z-index控制。这就很难受了。

那我一定要在地图上放东西怎么办，官方给出解决办法是

1. controls，但是controls的本质就是一张图片，无法满足多样化的需求（controls即将废弃，请使用 cover-view）

2.cover-view，覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，但是cover-view只支持嵌套cover-view、cover-image，button。所以同样无法满足多样化需求。

这样官方给出的解决方法就是然并卵。

那我们用第三方地图呗，然鹅目前小程序内不支持使用第三方地图。

但是我们可以用第三方地图的API，所以委曲求全一下，查看高德地图小程序API可以根据经纬度生成静态的图片，我们可以将这个图片作为背景。

具体实现链接：https://lbs.amap.com/api/wx/guide/create-map/static-map

效果如下：

.

微信小程序~map组件z-index无效的更多相关文章

  1. 微信小程序----map组件实现检索【定位位置】周边的POI

    效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...

  2. 微信小程序map组件z-index的层级问题

    说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的 ...

  3. 微信小程序Map组件踩坑日记

    刚刚又发生一个bug,搞得我头皮发麻,本来该美滋滋的回家准备度过愉快的周末,瞬间变成了日常修bug,来,开始填坑之路 情景再现: 首先说一说我们项目的需求, 点击下方,弹出抽屉 点击对应的地图打开相应 ...

  4. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  5. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  6. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  7. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  8. Wuss Weapp 一款高质量，组件齐全，高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  9. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

随机推荐

  1. Spring boot使用Aspose.Slides操作ppt转PDF、转图片

    最近要将ppt转为PDF和图片,Apache poi ,jacob都试了下 Apache poi 转图片乱码,处理了,还会存在部分乱码 jacob对系统依赖比较大,必须是windows还得安装MS O ...

  2. QT QML与C++混搭

    "那些杀不死我的必使我更加强大"----尼采 QML与C++混合编程就是使用QML高效便捷地构建UI,而C++则用来实现业务逻辑和复杂算法. ML访问C++Qt集成了QML引擎和Q ...

  3. Selenium自动化获取WebSocket信息

    性能日志 ChromeDriver支持性能日志记录,您可以从中获取域“时间轴”,“网络”和“页面”的事件,以及指定跟踪类别的跟踪数据. 启用性能日志 默认情况下不启用性能日志记录.因此,在创建新会话时 ...

  4. java笔记3

    面向对象的特点:   1.封装:   2.继承   3.多态 好处:   是一种符合人们思考习惯的思想  可以将复杂的事情简单化  将程序员从执行者变为指挥者 二 类与对象 成员变量与局部变量的区别: ...

  5. Scala 函数入门之默认参数和带名参数

    Scala 默认参数 在Scala中,有时我们调用某些函数时,不希望给出参数的具体值,而希望使用参数自身默认的值,此时就定义在定义函数时使用默认参数. def sayHello(firstName: ...

  6. 字符串类型日期时间转换为Date类型解析转换异常java.text.ParseException: Unparseable date: “2019-09-27T18:31:31+08:00”

    错误的写法: SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); //这里的格式也可以是别 ...

  7. 使用QMetaObject获取类的属性

    const QMetaObject *metaobject = object->metaObject(); int count = metaobject->propertyCount(); ...

  8. 使用for循环，批量删除历史数据

    declare maxrows number ; begin .. loop delete from TB_OPT_LOG ', 'yyyy-mm-dd') and rownum <= maxr ...

  9. 关于Shareppoint客户端对象模型和Shareppoint根据内部名称获取字段值的随笔

    实际上,每个SharePoint字段实际上有两个名称,一个是“标题”(Title,有时候也把它叫做“显示名称”),一个是“内部名称”(Internal Name).平时用户在列表视图界面上看到的,都是 ...

  10. 一张图看懂SharpImage

    通过下面的图片,可以瞬间看懂整个类库的脉络.图片比较大,如果看不清,可