给客户开发一个百度小程序,有个地图定位显示.百度小程序内置的api地图是不准的,通过百度一下,查询到坐标偏移算法公式,自己项目中使用,手机测试坐标已经正常显示! 经纬度,通过百度坐标拾取器拾取到! .swan文件 <map id="myMap" style="width:100%;height:50vh;" longitude="{{longitude}}" latitude="{{latitude}}" scale=&…

效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="map_container"> <view class="map-tab-bar"> <view class="map-tab-li {{item.id == status ? 'active' : ''}}" bindtap="…

使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canvas.camera等组件都是原生组件,层级是最高的,并不能像原生开发那样使用z-index来控制层级. 从1.4.0基础库中增加了一个组件cover-view,用于在map.video.canvas.camera等原生组件上显示基础原生视图. 但是用了cover-view这个组件之后 我又发现了一个问…

说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的,看起来没有一点问题,如下图: 但是在手机上真机模拟的时候就比较尴尬了,地图挡住了我底部的按钮,这个要怎么办呢?先是在百度上百度了好久,别人家写的博客都说,小程序的map组件是层级最高的,这个没办法处理; 然后就觉得凉凉了,不知道要怎么办了,难道要自己重新写个地图吗?感觉又不太现实,于是就问了最近在…

因项目需要,以map为背景,上面悬浮有其他组件.微信开发者工具测试时一切正常,但是真机测试时地图组件却把所有的组件覆盖,检查z-index设置,一切正常,地图组件层级也在这些组件的下面,为什么会被覆盖呢? 查小程序官方文档,官方文档表示,map组件层级最高无法用z-index控制.这就很难受了. 那我一定要在地图上放东西怎么办,官方给出解决办法是 1. controls,但是controls的本质就是一张图片,无法满足多样化的需求(controls即将废弃,请使用 cover-view) 2.c…

map组件默认在最上面,若要设置像ofo那样的按钮有两个方法,一是用控件设置,控件就是controls属性,控件只能显示图片,不能显示文字之类的.二是用cover-view组件,这个组件就是悬浮在一些组件上的,用于设置在map上或者设置在视频播放上等等,上面提到map标签要用标签对就是应对这种情况.将cover-view组件嵌套在map组件内就可以了.cover-image组件可以嵌套在cover-view内. <map id="myMap" show-location=&quo…

刚刚又发生一个bug,搞得我头皮发麻,本来该美滋滋的回家准备度过愉快的周末,瞬间变成了日常修bug,来,开始填坑之路 情景再现: 首先说一说我们项目的需求, 点击下方,弹出抽屉 点击对应的地图打开相应的APP 思路一:用map组件来实现 坑:布局都搞好之后,在微信开发者工具一切正常,结果真机测试的时候只有地图,所有东西都被覆盖住了 效果: 原因:原生Map组件层级是最高的,并且不能使用z-index来修改层级 如果要在地图上面加一些组件呢 解决: 方案一:控件设置,控件就是controls属性,…

.swan <!-- 轮播图S --> <view class="swiper-box"> <swiper class="banner" style='height:{{swiperH}}' bindchange="swiperChange" autoplay="true" interval="3000" duration="500" circular=&q…

百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在页中展示,不能自定义位置.字体大小.在单个文本中增加icon等需求:因此自定义一个全局可通用的Toast. 效果预览 如何使用 代码目录位于 /widget/toast 下,包含3个文件 toast.js 脚本代码 toast.css 样式文件,可以根据自己需求定制 toast.swan 模板结构,…

百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也不能满足一些复杂展示场景,所以就自己动手封装了个智能小程序弹窗wcPop自定义模板插件. 百度智能小程序wcPop支持多种动画展示形式,超精简调用api,可自定义多按钮事件,随意自定义弹窗模板内容. 智能小程序弹窗demo展示: 插件调用api超简洁,易于上手,只需在需要调用的页面引入tpl.js即…