因项目需要,以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. .Net Core控制台应用程序使用依赖注入、配置文件等

    .Net Core作为一门新语言,资料实在是太少了,并且国内学习的人也不多,虽然性能还行也跨平台了但是生态圈不发展起来也不行 刚出来的时候用 .Net Core + Dapper + Mysql 弄了 ...

  2. Navicat工具链接 mysql"Access denied for user'root'@'IP'" 用户远程赋值

    如题 用Navicat远程连接数据库出现错误   给用户添加权限 连接MySQL mysql -uroot -p: use mysql; 更改权限 使用grant all privileges on来 ...

  3. Dubbo版本升级

    一.背景 早期内部使用的是当当网fork的Dubbox,由于现在Dubbo又开始重新维护,而且阿里将其捐献给了Apache,并成为了Apache的顶级项目.因此dubbo版本升级到2.7.1势在必行. ...

  4. Postman系列四:Postman接口请求设置环境变量和全局变量、测试沙箱和测试断言、测试集运行与导入数据文件

    一:Postman中接口请求设置环境变量和全局变量 全局变量和环境变量可以通过Pre-request Script和Tests设置,会在下面测试沙箱和测试断言中讲到. 全局变量的设置:官网参考http ...

  5. 问题一:使用AndroidDriver而非原来的AppiumDriver的原因

    AppiumDriver升级到2.0.0版本引发的问题--Cannot instantiate the type AppiumDriver 1. 问题描述和起因在使用Appium1.7.0及其以下版本 ...

  6. QT_QML_常见问题

    1. qml文件中,如果要添加信号连接,如果与控件x有丁点关联,则将Connections{}最好放到该控件的{}内部,不这样做曾经遇到接受不到信号的奇葩问题. 2. 使用TabView时,在每个Ta ...

  7. 《算法 - Lru算法》

    一:概述 - LRU 用于管理缓存策略,其本身在 Linux/Redis/Mysql 中均有实现.只是实现方式不尽相同. - LRU 算法[Least recently used(最近最少使用)] - ...

  8. 【C++札记】指针数组和数组指针

    指针数组: 存储指针的数组,数组找那个的每个一元素都是指针 例: int* p1[4],p2[0]是一个指向int类型的指针 char* p2[4],p1[0]是一个指向char类型的指针 数组指针: ...

  9. spider存储引擎

    1.spider 安装 1.1.MariaDB 安装 1.1.1 下载MariaDB wget https://mirrors.tuna.tsinghua.edu.cn/mariadb//mariad ...

  10. Gym 102055B Balance of the Force

    大意: $n$个骑士, 第$i$个骑士若加入光明阵营, 那么能力值$L_i$, 加入黑暗阵营, 能力值$D_i$. 给定$m$个限制$(u_i,v_i)$, 表示$u_i,v_i$不能在同一阵营. 求 ...