微信小程序~map组件z-index无效
因项目需要,以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无效的更多相关文章
- 微信小程序----map组件实现检索【定位位置】周边的POI
效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...
- 微信小程序map组件z-index的层级问题
说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的 ...
- 微信小程序Map组件踩坑日记
刚刚又发生一个bug,搞得我头皮发麻,本来该美滋滋的回家准备度过愉快的周末,瞬间变成了日常修bug,来,开始填坑之路 情景再现: 首先说一说我们项目的需求, 点击下方,弹出抽屉 点击对应的地图打开相应 ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- 微信小程序UI组件库 iView Weapp快速上手
概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...
随机推荐
- charles安装和使用(转)
转发链接:https://blog.csdn.net/zhangxiang_1102/article/details/77855548
- 并行编程架构(指令流水、进程、线程、多核,Pipe and Filter)
最近在进行DSP软件优化时,查阅文献,看到了几种并行机制,下面予以总结: 关键词一:指令流水 关键词二:多进程 关键词三:多线程 关键词四:多核(多处理器.超线程结构.多核结构.多核超线程架构) 在体 ...
- c++ std::cout重定向到文件
cout默认是与监视器(屏幕)相连,cout出来的内容会输出到屏幕上,通常是会在命令行窗口之中.但有时,我们希望将cout出来的具体日志.错误信息写到某个文件之中,而屏幕上仅仅显示出当前进行的任务,以 ...
- LeetCode 290. 单词规律(Word Pattern) 41
290. 单词规律 290. Word Pattern 题目描述 给定一种规律 pattern 和一个字符串 str,判断 str 是否遵循相同的规律. 这里的 遵循 指完全匹配,例如,pattern ...
- redis复制机制
摘自redis设计与实现 通过客户端,发送slave of xxx给redis从服务器,即可实现主从服务器之间的复制.如果主服务器设置了requirepass进行身份验证,从服务器需要设置master ...
- microk8s 搭建
一.简述 microk8s不通过虚拟机但与主机隔离方式,快速轻巧安装Kubernetes.通过在单个快照包中打包Kubernetes,Docker.io,iptables和CNI的所有上游二进制文件来 ...
- JNA的应用
一.了解JNA之前,我们先了解一下JNA的前身JNI(Java Native Interface):通过使用 Java本地接口书写程序,可以确保代码在不同的平台上方便移植. [1] 从Java1.1 ...
- 你有自信写while(true)吗?
每次写while(true)的时候会不会心虚? 特别逻辑稍微复杂一点
- 通俗易懂的join、left join、right join、full join、cross join
内连接:列出与连接条件匹配的数据行(join\inner join) 外连接:两表合并,如有不相同的列,另外一个表显示null(left join\right join\full outer join ...
- Java调用WebService方法总结(7)--CXF调用WebService
CXF = Celtix + XFire,继承了Celtix和XFire两大开源项目的精华,是一个开源的,全功能的,容易使用的WebService框架.文中所使用到的软件版本:Java 1.8.0_1 ...