首页 > 代码库 > 小程序九:导航&地图&画布
小程序九:导航&地图&画布
navigator
导航
属性名 | 类型 | 默认值 | 说明 |
url | String | 应用内的跳转链接 | |
redirect | Boolean | false | 是否关闭当前页面 |
hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class="none"时,没有点击态效果 |
注:navigator-hover默认为{opacity:0.7;},<navigator/>的子节点背景色应为透明色
示例代码:
index.wxss:
/** 修改默认的navigator点击态 **/ .navigator-hover{ color:blue; } /** 自定义其他点击态样式类 **/ .other-navigator-hover{ color:red; }
index.wxml:
<view class="btn-area"> <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator> </view> </navigator> <view style="text-align:center"> {{title}} </view> <view> 点击左上角返回回到之前页面 </view> <view style="text-align:center"> {{title}} </view> <view> 点击左上角返回回到上级页面 </view>
index.js:
Page({ onl oad: function(options) { this.setData({ title: options.title }) } })
map
地图
属性名 | 类型 | 默认值 | 说明 |
longitude | Number | 中心经度 | |
latitude | Number | 中心纬度 | |
scale | Number | 1 | 缩放级别 |
markers | Array | 标记点 | |
covers | Array | 覆盖物 |
标记点
标记点用于在地图上显示标记的位置,不能自定义图标和样式
属性 | 说明 | 类型 | 必填 | 备注 |
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 |
name | 标注点名 | String | 是 | |
desc | 标注点详细描述 | String | 否 |
覆盖物
覆盖物用于在地图上显示自定义图标,可自定义图标和样式
属性 | 说明 | 类型 | 必填 | 备注 |
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 |
iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径,支持相对路径写法 |
rotate | 旋转角度 | Number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 |
地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
目前测试在正式环境是调用不出来的,不清楚原因。
示例:
index.wxml:
<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
index.js:
Page({ data: { markers: [{ latitude: 23.099994, longitude: 113.324520, name: ‘T.I.T 创意园‘, desc: ‘我现在的位置‘ }], covers: [{ latitude: 23.099794, longitude: 113.324520, icaonPath: ‘../images/car.png‘, rotate: 10 }, { latitude: 23.099298, longitude: 113.324129, iconPath: ‘../images/car.png‘, rotate: 90 }] } })<strong> </strong>
canvas
属性名 | 类型 | 默认值 | 说明 |
hidden | Boolean | false | 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 |
canvas-id | String | canvas组件的唯一标识符 | |
binderror | EventHandle | 当发生错误时触发error事件,detail = { errMsg: ‘something wrong‘ } |
注:
- canvas标签默认宽度300px、高度225px
- 同一页面中的canvas-id不可重复,如果使用一个已经出现过的canvas-id,该canvas标签对应的画布将被隐藏并不再正常工作
示例代码:
index.wxml:
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas> <!-- 当使用绝对定位时,文档流后边的canvas的显示层级高于前边的canvas--> <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas> <!-- 因为canvas-id与前一个canvas重复,该canvas不会显示,并会发送一个错误事件到AppService --> <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
index.js:
Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg); }, onReady: function (e) { //使用wx.createContext获取绘图上下文context var context = wx.createContext(); context.setStrokeStyle("#00ff00"); context.setLineWidth(5); context.rect(0,0,200,200); context.stroke() context.setStrokeStyle ("#ff0000") ; context.setLineWidth (2) context.moveTo(160,100) context.arc(100,100,60,0,2*Math.PI,true); context.moveTo(140,100); context.arc(100,100,40,0,Math.PI,false); context.moveTo(85,80); context.arc(80,80,5,0,2*Math.PI,true); context.moveTo(125,80); context.arc(120,80,5,0,2*Math.PI,true); context.stroke(); //调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为 wx.drawCanvas({ canvasId: ‘firstCanvas‘, actions: context.getActions() //获取绘图动作数组 }); } });
小程序九:导航&地图&画布
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。