小程序map组件填坑

2018-10-29阅读(2016)评论(0)牵着狗狗看MM

W3Cways.com 微信公众号

先贴上官方API:

属性名 类型 默认值 说明 最低版本
longitude Number 中心经度
latitude Number 中心纬度
scale Number 16 缩放级别,取值范围为5-18
markers Array 标记点
covers Array 即将移除,请使用 markers
polyline Array 路线
polygons Array 多边形 2.3.0
circles Array
controls Array 控件(即将废弃,建议使用 cover-view 代替)
include-points Array 缩放视野以包含所有给定的坐标点
show-location Boolean 显示带有方向的当前定位点
subkey String 个性化地图使用的key,仅初始化地图时有效 2.3.0
enable-3D Boolean false 展示3D楼块(工具暂不支持) 2.3.0
show-compass Boolean false 显示指南针 2.3.0
enable-overlooking Boolean false 开启俯视 2.3.0
enable-zoom Boolean true 是否支持缩放 2.3.0
enable-scroll Boolean true 是否支持拖动 2.3.0
enable-rotate Boolean false 是否支持旋转 2.3.0
bindmarkertap EventHandle 点击标记点时触发,会返回marker的id
bindcallouttap EventHandle 点击标记点对应的气泡时触发,会返回marker的id 1.2.0
bindcontroltap EventHandle 点击控件时触发,会返回control的id
bindregionchange EventHandle 视野发生变化时触发 2.3.0起增加causedBy 参数区分拖动、缩放和调用接口等来源
bindtap EventHandle 点击地图时触发
bindupdated EventHandle 在地图渲染更新完成时触发 1.6.0
bindpoitap EventHandle 点击地图poi点时触发 2.3.0

一:marker气泡不能自定义样式

marker 上的气泡 callout
属性 说明 类型 最低版本
content 文本 String 1.2.0
color 文本颜色 String 1.2.0
fontSize 文字大小 Number 1.2.0
borderRadius 边框圆角 Number 1.2.0
borderWidth 边框宽度 Number 2.3.0
borderColor 边框颜色 String 2.3.0
bgColor 背景色 String 1.2.0
padding 文本边缘留白 Number 1.2.0
display ‘BYCLICK’:点击显示; ‘ALWAYS’:常显 String 1.2.0
textAlign 文本对齐方式。有效值: left, right, center String 1.6.0

如上所示,由于是原生组件,气泡只支持上述属性,所以想要个性化的展示,只能通过个性化小程序地图,但是是有使用限制
日限制:1万次/Key/接口
并发限制:5次/秒/Key/接口
如需更大配额需要申请,且必须是公司性质。

bindregionchange方法

文档里说“2.3.0起增加causedBy 参数区分拖动、缩放和调用接口等来源”
但是没说明causedBy 具体有哪些值
实际调试过程中,通过微信开发者工具,能调试出causedBy == “drag”时,可以判断为,用户进行了拖拽操作
结合bindregionchange方法

  bindregionchange(e) {
    if (e.type == 'end' && e.causedBy == "drag") {//当前可视区域变动,且是用户拖拽结束后的动作
      this.doSomething()
    }
  }
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 小程序map组件填坑
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!