map
地图(v2.7.0 起支持)。相关api wx.createMapContext。
个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通,详见。小程序内地图组件应使用同一 ,可通过 layer-style
(地图官网设置的样式 style 编号)属性选择不同的底图风格。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
视野改变时,regionchange 会触发两次,返回的 type 值分别为 begin / end。
起 end 阶段返回 causedBy,有效值为 drag(拖动导致)、scale(缩放导致)、update(调用更新接口导致)、skew
仅在 end 阶段返回
setting
提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate
和 skew
,通过 setData
分开设置时无法同时生效,需通过 settting
统一修改。
marker
标记点用于在地图上显示标记的位置
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。 | |
latitude | 纬度 | number | 是 | 浮点数,范围 -90 ~ 90 | |
longitude | 经度 | number | 是 | 浮点数,范围 -180 ~ 180 | |
title | 标注点名 | string | 否 | 点击时显示,callout存在时将被忽略 | |
zIndex | 显示层级 | number | 否 | 2.3.0 | |
iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径,支持网络路径、本地路径、代码包路径() | |
rotate | 旋转角度 | number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 | |
alpha | 标注的透明度 | number | 否 | 默认 1,无透明,范围 0 ~ 1 | |
width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 | |
height | 标注图标高度 | number/string | 否 | 默认为图片实际高度 | |
callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表,可识别换行符。 | 1.2.0 |
label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表,可识别换行符。 | |
anchor | 经纬度在标注图标的锚点,默认底边中点 | Object | 否 | {x, y},x 表示横向(0-1),y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | 1.2.0 |
aria-label | 无障碍访问,(属性)元素的额外描述 | string | 否 |
marker 上的气泡 callout
属性 | 说明 | 类型 | 最低版本 |
---|---|---|---|
content | 文本 | string | 1.2.0 |
color | 文本颜色 | string | |
fontSize | 文字大小 | number | 1.2.0 |
borderRadius | 边框圆角 | number | |
borderWidth | 边框宽度 | number | 2.3.0 |
borderColor | 边框颜色 | string | |
bgColor | 背景色 | string | 1.2.0 |
padding | 文本边缘留白 | number | |
display | 'BYCLICK':点击显示; 'ALWAYS':常显 | string | 1.2.0 |
textAlign | 文本对齐方式。有效值: left, right, center | string |
polyline
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | |
color | 线的颜色 | string | 否 | 十六进制 | |
width | 线的宽度 | number | 否 | ||
dottedLine | 是否虚线 | boolean | 否 | 默认 false | |
arrowLine | 带箭头的线 | boolean | 否 | 默认 false,开发者工具暂不支持该属性 | 1.2.0 |
arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 | |
borderColor | 线的边框颜色 | string | 否 | 1.2.0 | |
borderWidth | 线的厚度 | number | 否 |
polygon
指定一系列坐标点,根据 points 坐标数据生成闭合多边形
属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
---|---|---|---|---|---|
points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | 2.3.0 |
strokeWidth | 描边的宽度 | number | 否 | ||
strokeColor | 描边的颜色 | string | 否 | 十六进制 | 2.3.0 |
fillColor | 填充颜色 | string | 否 | 十六进制 | |
zIndex | 设置多边形Z轴数值 | number | 否 |
circle
在地图上显示圆
在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
id | 控件id | number | 否 | 在控件点击事件回调会返回此id |
position | 控件在地图的位置 | object | 是 | 控件相对地图位置 |
iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径,支持本地路径、代码包路径 |
clickable | 是否可点击 | boolean | 否 | 默认不可点击 |
position
属性 | 说明 | 类型 | 必填 | 备注 |
---|---|---|---|---|
left | 距离地图的左边界多远 | number | 否 | 默认为0 |
top | 距离地图的上边界多远 | number | 否 | 默认为0 |
width | 控件宽度 | number | 否 | 默认为图片宽度 |
height | 控件高度 | number | 否 | 默认为图片高度 |
bindregionchange 返回值
Bug & Tip
tip
:个性化地图暂不支持工具中调试。请先使用微信客户端进行测试。- :地图中的颜色值color/borderColor/bgColor等需使用6位(8位)十六进制表示,8位时后两位表示alpha值,如:#000000AA
tip
:地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。tip
:map
组件使用的经纬度是火星坐标系,调用 接口需要指定type
为gcj02
tip
:从 2.8.0 起 map 支持同层渲染,更多请参考原生组件使用限制- :请注意。
scale | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
比例 | 1000km | 500km | 200km | 100km | 50km | 50km | 20km | 10km | 5km |
scale | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
比例 | 2km | 1km | 500m | 200m | 100m | 50m | 50m | 20m | 10m |