
marker 上的自定义气泡 customCallout
map
基础库 1.0.0 开始支持,低版本需做兼容处理。
地图(v2.7.0 起支持同层渲染)。相关api wx.createMapContext。
subkeylayer-style
示例小程序
e.detail = {markerId}e.detail = {markerId}e.detail = {controlId}e.detail = {markerId}e.detail = {name, longitude, latitude}e.detail = {longitude, latitude}
regionchange 返回值
视野改变时,regionchange 会触发两次,返回的 type 值分别为 begin 和 end。
2.8.0 起 begin 阶段返回 causedBy,有效值为 gesture(手势触发) & update(接口触发)
2.3.0 起 end 阶段返回 causedBy,有效值为 drag(拖动导致)、scale(缩放导致)、update(调用更新接口导致)。
e = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}
setting
rotateskewsetDatasettting
// 默认值const setting = {skew: 0,rotate: 0,showLocation: false,showScale: false,subKey: '',layerStyle: 1,enableZoom: true,enableScroll: true,enableRotate: false,showCompass: false,enable3D: false,enableOverlooking: false,enableSatellite: false,enableTraffic: false,}this.setData({// 仅设置的属性会生效,其它的不受影响setting: {enable3D: true,enableTraffic: true}})
marker
标记点用于在地图上显示标记的位置
| 属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
|---|---|---|---|---|---|
| id | 标记点 id | number | 否 | marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。 | |
| clusterId | 聚合簇的 id | Number | 否 | 自定义点聚合簇效果时使用 | |
| joinCluster | 是否参与点聚合 | Boolean | 否 | 默认不参与点聚合 | |
| latitude | 纬度 | number | 是 | 浮点数,范围 -90 ~ 90 | |
| longitude | 经度 | number | 是 | 浮点数,范围 -180 ~ 180 | |
| title | 标注点名 | string | 否 | 点击时显示,callout存在时将被忽略 | |
| zIndex | 显示层级 | number | 否 | ||
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径,支持网络路径、本地路径、代码包路径(2.3.0) | |
| rotate | 旋转角度 | number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 | |
| alpha | 标注的透明度 | number | 否 | 默认 1,无透明,范围 0 ~ 1 | |
| width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 | |
| height | 标注图标高度 | number/string | 否 | 默认为图片实际高度 | |
| callout | 标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表,可识别换行符。 | |
| customCallout | 自定义气泡窗口 | Object | 否 | 支持的属性见下表 | |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表,可识别换行符。 | |
| anchor | 经纬度在标注图标的锚点,默认底边中点 | Object | 否 | {x, y},x 表示横向(0-1),y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | |
| aria-label | 无障碍访问,(属性)元素的额外描述 | string | 否 |
marker 上的气泡 callout
| 属性 | 说明 | 类型 | 最低版本 |
|---|---|---|---|
| content | 文本 | string | |
| color | 文本颜色 | string | |
| fontSize | 文字大小 | number | |
| borderRadius | 边框圆角 | number | |
| borderWidth | 边框宽度 | number | |
| borderColor | 边框颜色 | string | |
| bgColor | 背景色 | string | |
| padding | 文本边缘留白 | number | |
| display | ‘BYCLICK’:点击显示; ‘ALWAYS’:常显 | string | |
| textAlign | 文本对齐方式。有效值: left, right, center | string | |
| anchorX | 横向偏移量,向右为正数 | number | |
| anchorY | 纵向偏移量,向下为正数 | number |
marker 上的自定义气泡 customCallout
customCalloutcallouttitlecover-view
| 属性 | 说明 | 类型 | 最低版本 |
|---|---|---|---|
| display | ‘BYCLICK’:点击显示; ‘ALWAYS’:常显 | string | |
| anchorX | 横向偏移量,向右为正数 | number | |
| anchorY | 纵向偏移量,向下为正数 | number |
mapcalloutslotcover-viewmarkermarkercover-viewcallout
marker 上的气泡 label
| 属性 | 说明 | 类型 | 最低版本 |
|---|---|---|---|
| content | 文本 | string | |
| color | 文本颜色 | string | |
| fontSize | 文字大小 | number | |
| x | label的坐标(废弃) | number | |
| y | label的坐标(废弃) | number | |
| anchorX | label的坐标,原点是 marker 对应的经纬度 | number | |
| anchorY | label的坐标,原点是 marker 对应的经纬度 | number | |
| borderWidth | 边框宽度 | number | |
| borderColor | 边框颜色 | string | |
| borderRadius | 边框圆角 | number | |
| bgColor | 背景色 | string | |
| padding | 文本边缘留白 | number | |
| textAlign | 文本对齐方式。有效值: left, right, center | string |
polyline
指定一系列坐标点,从数组第一项连线至最后一项。绘制彩虹线时,需指定不同分段的颜色,如 points 包含 5 个点,则 colorList 应传入 4 个颜色值;若 colorList 长度小于 points.length - 1,则剩下的分段颜色与最后一项保持一致。
| 属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | |
| color | 线的颜色 | string | 否 | 十六进制 | |
| colorList | 彩虹线 | array | 否 | 存在时忽略 color 值 | |
| width | 线的宽度 | number | 否 | ||
| dottedLine | 是否虚线 | boolean | 否 | 默认 false | |
| arrowLine | 带箭头的线 | boolean | 否 | 默认 false,开发者工具暂不支持该属性 | |
| arrowIconPath | 更换箭头图标 | string | 否 | 在 arrowLine 为 true 时生效 | |
| borderColor | 线的边框颜色 | string | 否 | ||
| borderWidth | 线的厚度 | number | 否 | ||
| level | 压盖关系 | string | 否 | 默认为 abovelabels |
level
| 值 | 说明 | 最低版本 |
|---|---|---|
| abovelabels | 显示在所有 POI 之上 | |
| abovebuildings | 显示在楼块之上 POI 之下 | |
| aboveroads | 显示在道路之上楼块之下 |
polygon
指定一系列坐标点,根据 points 坐标数据生成闭合多边形
| 属性 | 说明 | 类型 | 必填 | 备注 | 最低版本 |
|---|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] | |
| strokeWidth | 描边的宽度 | number | 否 | ||
| strokeColor | 描边的颜色 | string | 否 | 十六进制 | |
| fillColor | 填充颜色 | string | 否 | 十六进制 | |
| zIndex | 设置多边形Z轴数值 | number | 否 | ||
| level | 压盖关系 | string | 否 | 默认为 abovelabels |
circle
在地图上显示圆
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| latitude | 纬度 | number | 是 | 浮点数,范围 -90 ~ 90 |
| longitude | 经度 | number | 是 | 浮点数,范围 -180 ~ 180 |
| color | 描边的颜色 | string | 否 | 十六进制 |
| fillColor | 填充颜色 | string | 否 | 十六进制 |
| radius | 半径 | number | 是 | |
| strokeWidth | 描边的宽度 | number | 否 | |
| level | 压盖关系 | string | 否 | 默认为 abovelabels |
control
在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| id | 控件id | number | 否 | 在控件点击事件回调会返回此id |
| position | 控件在地图的位置 | object | 是 | 控件相对地图位置 |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径,支持本地路径、代码包路径 |
| clickable | 是否可点击 | boolean | 否 | 默认不可点击 |
position
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| left | 距离地图的左边界多远 | number | 否 | 默认为0 |
| top | 距离地图的上边界多远 | number | 否 | 默认为0 |
| width | 控件宽度 | number | 否 | 默认为图片宽度 |
| height | 控件高度 | number | 否 | 默认为图片高度 |
bindregionchange 返回值
| 属性 | 说明 | 类型 | 备注 |
|---|---|---|---|
| type | 视野变化开始、结束时触发 | string | 视野变化开始为begin,结束为end |
| causedBy | 导致视野变化的原因 | string | 拖动地图导致(drag)、缩放导致(scale)、调用接口导致(update) |
Bug & Tip
tiptiptiptipmaptypegcj02tip
比例尺
| 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 |
示例代码
点聚合
当地图上需要展示的标记点 marker 过多时,可能会导致界面上 marker 出现压盖,展示不全,并导致整体性能变差。针对此类问题,推出点聚合能力。
使用流程如下:
示例代码
需注意的是:1. 地图上的 marker 分为普通的 marker 与参与聚合的 marker,参与聚合时需指定属性 joinCluster 为 true; 2. 自定义聚合簇样式时,同样通过 MapContext.addMarkers 进行绘制,此时需携带 clusterId。


