在小程序开发的过程中,我碰到过一个做map的需求,在我开发的时候我碰到了一些问题,这里总结出来,给大家一些解决方法. 简易小程序dome下载 代码片段分享: js部分: var amapFile = require('../../libs/amap-wx.js');//如:..­/..­/libs/amap-wx.js Page({ data: { markers: [], latitude: '', longitude: '', textData: {}, dome:false }, onLo

wxml <map id="myMap" style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location bindmarkertap="selectMarket"

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

1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提供的cover-view及cover-image可覆盖原生组件: 2.小程序map自定义个性化地图设置: 1)进入小程序平台,点击开发找到开发者工具,点击腾讯位置服务的查看详情,进入腾讯小程序官网,点击立即接入,选择个性化地图 2)选好地图模板,点击提交 3)复制密钥 4)在小程序map里加上复制好

最近需求有一个类似共享单车查看附近单车的功能,看了看小程序map api对多点定位显示描述的不怎么清晰.显示定位数组添加多个时就不显示了.踩了几个坑写了几个方法.最终弄出来了.有问题建议欢迎留言. html: <map id="map" scale="{{scale}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="marke

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

微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数): 3,微信没有将经纬度直接转换为地理位置,借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API(返回信息中包括国家,省,市,区,经纬度等地理位置)步骤描述清楚以后,下面就开始按步骤操作了:(本文仅仅讲述如何获取用户地理位置的授权) 图示为获取用户地理位置授权弹窗 在用户首次进入某页面(

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

在微信小程序中实现视频的播放与暂停 需求: 视频列表中只能有一个视频在播放 点击视频实现播放与暂停功能 加载完成显示图片,点击后变为视频播放 从上次播放的位置进行播放 思路: 定义一个标记变量,控制视频的播放与暂停 true => 本次问播放 false => 本次为暂停 每次点击后,更新data中视频的id值 声明一个数组,用于存放播放视频的id和播放时间 { vid:xxx, currentTime:xxx } 事件的流程图 代码实现: 静态 <!-- 使用scroll-view组件

小程序开发---获取当前位置信息 一.获取用户地理位置信息 1.配置app.json文件 { "pages": ["pages/index/index"], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } } 2.调用函数进行请求 在page({})中进行调用(小程序查看 wx.get

问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无法聚焦,具体效果如下: 经过尝试,发现是因为input组件默认的样式问题,在设置input组件的宽度的时候 如果是这是width的值,则不能用百分比,而要用真实的数据,如px.rpx等:还有一种情况就是如果真需要用到百分比,那么可设置的input组件的 min-width 和 max-width 属

wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webService并设置,小程序的合法域名(当前小程序的服务器域名)为允许ip

详细参数说明请看小程序api文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.openLocation.html wx.getLocation({ type: 'gcj02', // 返回可以用于wx.openLocation的经纬度 success(res) { const latitude = res.latitude const longitude = res.longitude wx.openLocation({ lat

这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行.当然 image标签src属性也可以使用网络url或者base64图片编码. 下面通过 image 标签src属性设置,实现背景图显示 界面结构: <view class='set-background'>

tabBar不显示 在app.json中配置了4个页面,在tabBar的list中随意写了两个页面,编译后发现不能显示tabBar. { "pages": [ "pages/musicList/musicList", "pages/test/test", "pages/index/index", "pages/logs/logs" ], "window": { "backgro

微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.datetime}}" wx:for

问题描述: 测试库转到正式库后添加数据,小程序数据渲染不出来,但是测试库没问题,ios数据能显示,没问题,但是安卓显示没数据. 排除是服务器https证书问题,如果是证书问题,小程序会直接调不了接口. 百度一堆解决办法,最靠谱点的解决办法:https://www.jianshu.com/p/3203b98807b4 前后端根据方法排查问题,仍然解决不了 问题来源: 运维在后台添加数据时,直接复制粘贴会导致数据异常,正常看数据没问题,但是返回json给前端会渲染不了, 除此之外,添加数据时带上回车

问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无法聚焦,具体效果如下: 经过尝试,发现是因为input组件默认的样式问题,在设置input组件的宽度的时候 如果是这是width的值,则不能用百分比,而要用真实的数据,如px.rpx等:还有一种情况就是如果真需要用到百分比,那么可设置的input组件的 min-width 和 max-width 属

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

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