index.wxml: longitude:经度 latitude:维度 地图所定位的区域 index.js 地图所定位的点

微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图 ​ 小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.

微信小程序打开其他小程序(打开同一公众号下关联的另一个小程序) 注:只有同一(主体)公众号下的关联的小程序之间才可相互跳转  wx.navigateToMiniProgram(OBJECT) wx.navigateToMiniProgram({ appId: '要打开的AppId', path: 'pages/index/index?id=123456789', extarData: { open: 'happy' }, envVersion: 'release', success(res) {

具体情况是:微信小程序打开springboot返回的pdf文件.微信端先downloadFile,然后openDocument.但是打开文档一直不成功.后来发现官网的例子没有加fileType,我在参数里加上fileType:'pdf' 就好了

一.本篇文章主要知识点有以下几种: 1.授权当前位置 2.map组件的使用 3.腾讯地图逆地址解析 4.坐标系的转化 二.效果如下: 三.WXML代码 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="6" markers="{{markers}}" bindmarkertap="markertap&

先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规的地图事件监听,并没有添加地图服务相关的支持. 不过有了需求,也要想办法解决呀. 图层查询 既然小程序不能直接添加地图服务,那就把图层数据查出来,然后通过添加点线面方式添加到地图,具体要怎么实现呢? 首先想到的是通过图层查询接口把所有数据查出来. 但是既然数据是按图层发布的,一般数据量都比较大,把所

微信小程序在做地图功能时 用常规的办法height:100%:来设置高度来占满屏幕是不行的 它不会生效 应该改用单位vh 例如 height:100vh 这样就可以是地图占满整个屏幕高度

环境:微信SDK2.9+   + uniapp (可切换直接使用.map.js不限制环境) 正题: 先创建一个地图组件 <template> <view class="customCanvasComponent"> <!-- 建立画布坐标系 --> <canvas :style="{ width: `${options.style.width}rpx`, height: `${options.style.height}rpx`, bo

1.在app.json中与pages平级的位置处,加上: "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口展示" } }, 注意:必须有类似于上面的汉字文字说明.   2.在.wxml中 <button open-type="getUserInfo">允许使用微信昵称等</button> <but

在componentDidMount中,初始化mapCtx. let _this = this this.mapCtx = Taro.createMapContext('container') //container是地图显示模块id Taro.getLocation({ type: 'wgs84', success(res) { _this.setState({ latitude = res.latitude, longitude = res.longitude }) } }) //移动到定位

更新: 2018-9-19 腾讯官方经纬度转详细地址,详细地址转经纬度 index.wxml <!--地图容器--> <map id="myMap" style="width: 100%; height: 300px;" longitude="{{longitude}}" latitude="{{latitude}}" scale='{{scale}}' polyline="{{polyline}}

wx.getLocation({ type: 'wgs84', success(res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy console.log(res) } }) wx.chooseLocation({ success(res) { console.log(res) } })

  GetDistance:function(lat1, lng1, lat2, lng2){ // console.log(lat1) var radLat1 = lat1 * Math.PI / 180.0; var radLat2 = lat2 * Math.PI / 180.0;   var a = radLat1 - radLat2;   var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;   var s = 2 * Mat

uni.downloadFile({ url: item.url, success: (res) => { if (res.statusCode === 200) { uni.openDocument({ filePath: res.tempFilePath, // 如果文件名包含中文,建议使用escape(res.tempFilePath)转码,防止ios和安卓客户端导致的差异 success: function(res) { console.log('打开文档成功'); } }); } }

源码 <template> <view class="echart-box"> <canvas class="ec-canvas" :id="chartId" :canvasId="chartId" @error="error"></canvas> </view> </template> <script> import Wx

最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个过程中,用到了微信小程序的组件map和腾讯地图sdk,接下来主要对微信小程序的地图开发进行总结 一.微信小程序地图组件 为了方便微信小程序使用地图的相关功能,微信小程序为我们提供了map组件,通过这个组件,我们可以很简单的引入地图,并且还可以进行个性化地图的开发 1.map组件 微信小程序提供的地图

小程序看似一种全新的东西,但好在基本上就是曾经HTML,CSS,JS的一个微变版本. 语法和之前一样.只是一些用法和名字(标签)发生了一些变化. 小程序主要就四种扩展名的文件:js,json,wxml,wxss JS,小程序的功能实现文件,和普通的JavaScript没什么区别,更多的是加入了一些微信扩展的方法,可以与微信进行一些交互. JSON,小程序的配置文件,也比较简单,格式和之前熟知的JSON文本文件没有区别,在小程序里主要也是用于配置环境和属性等. WXSS,小程序的样式文件,语法和普

场景:根据地理定位获取不同地区的充电桩位置,要求 1.平移的时候,跟随坐标变化展示不同区域的坐标点信息 2.不同的缩放等级,14以下,展示聚合点数据,14以上,展示真正的站点信息: 3.点击聚合点的时候,当前地图会放大,直到缩放等级大于14为止,最终的结果是展示真正的站点信息而不是聚合点 实现原理: map组件提供了bindregionchange函数,可以监听视野变化,目前测试下来(不知道还有没有别的),能够引起视野变化的有: 1.改变经纬度 2.改变缩放等级 因此,利用这两点,可以达到我们的

微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ] } 否则会弹出以下错误提示: 超链接实现跳转到小程序: demo.wxml <navigator target="miniProgram&quo

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源