map 地图
收藏我的收藏
收藏基础库 1.63.0 开始支持本组件。
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
longitude | number | | 是 | 中心经度 | 1.63.0 |
latitude | number | | 是 | 中心纬度 | 1.63.0 |
scale | number | 16 | 否 | 缩放级别，取值范围为 3-19 | 1.63.0 |
markers | Marker[] | | 否 | 标记点 | 1.63.0 |
circles | Circle[] | | 否 | 圆 | 1.63.0 |
show-location | boolean | false | 否 | 是否显示当前位置 | 1.63.0 |
polyline | Polyline[] | | 否 | 路线数组 | 1.71.0 |
include-points | LngLat[] | | 否 | 缩放视野以包含所有给定的坐标点；示例： [{latitude: 0, longitude: 0}] | 1.71.0 |
bindtap | EventHandle | | 否 | 点击地图时触发， e.detail = { latitude, longitude} | 1.71.0 |
bindmarkertap | EventHandle | | 否 | 点击标记点时触发， e.detail = {markerId, latitude, longitude} | 1.71.0 |
bindcallouttap | EventHandle | | 否 | 点击标记点对应的气泡时触发, e.detail = {markerId} | 1.71.0 |
bindregionchange | EventHandle | | 否 | 视野发生变化时触发 | 1.71.0 |
rotate | number | 0 | 否 | 顺时针旋转角度，范围 0 ~ 360，旋转原点为地图容器中心点 | 2.34.0 |
skew | number | 0 | 否 | 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 | 2.34.0 |
polygons | Polygon[] | | 否 | 多边形 | 2.34.0 |
show-compass | boolean | false | 否 | 显示指南针 | 2.34.0 |
enable-overlooking | boolean | false | 否 | 开启俯视手势支持，双指上下滑调整俯仰角 | 2.34.0 |
enable-rotate | boolean | false | 否 | 开启旋转手势支持，双指旋转调整旋转角度 | 2.34.0 |
min-scale | number | 3 | 否 | 最小缩放级别，取值范围为 3 - max-scale | 2.42.0 |
max-scale | number | 19 | 否 | 最大缩放级别，取值范围为 min-scale - 19 | 2.42.0 |
enable-3D | boolean | false | 否 | 是否展示 3D 楼块，该属性 IOS 不支持 | 2.42.0 |
show-scale | boolean | false | 否 | 是否显示比例尺 | 2.42.0 |
enable-zoom | boolean | true | 否 | 是否支持缩放 | 2.42.0 |
enable-scroll | boolean | true | 否 | 是否支持拖动 | 2.42.0 |
enable-satellite | boolean | false | 否 | 是否开启卫星图 | 2.42.0 |
enable-traffic | boolean | false | 否 | 是否开启实时路况，在该属性为 true 时， enable- building 和 enable-3D 无效 | 2.42.0 |
enable-poi | boolean | true | 否 | 是否显示地名 | 2.42.0 |
enable-building | boolean | true | 否 | 是否展示建筑物 | 2.42.0 |
bindlabeltap | EventHandle | | 否 | 点击 label 时触发， e.detail = {markerId} | 2.42.0 |
bindupdated | EventHandle | | 否 | 在地图渲染更新完成时触发 | 2.42.0 |
bindanchorpointtap | EventHandle | | 否 | 点击定位标时触发， e.detail = {longitude, latitude} | 2.42.0 |
Marker 类型说明
object 类型，属性如下：
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
id | number | | 否 | 标记点 id | 1.63.0 |
latitude | number | | 是 | 纬度 | 1.63.0 |
longitude | number | | 是 | 经度 | 1.63.0 |
title | string | | 否 | 标注点名，点击时显示；不传或者传空字符串，则点击无反应 | 1.63.0 |
iconPath | string | 默认 icon | 否 | 图片路径 | 1.63.0 |
width | number | | 否 | 标注图标宽度，默认为图片实际宽度 | 2.15.0 |
height | number | | 否 | 标注图标高度，默认为图片实际高度 | 2.15.0 |
zIndex | number | | 否 | marker 的显示层级，默认同 marker 插入顺序 | 2.15.0 |
callout | Callout | | 否 | 2.15.0 | |
alpha | number | 1 | 否 | 标注的透明度，范围 0-1 | 2.34.0 |
anchorX | number | 0.5 | 否 | 以标注图标左上角为原点，经纬度锚点相对于标注图标的横向偏移比例，以向右为正向，取值区间为 [0, 1] | 2.34.0 |
anchorY | number | 1 | 否 | 以标注图标左上角为原点，经纬度锚点相对于标注图标的纵向偏移比例，以向下为正向，取值区间为 [0, 1] | 2.34.0 |
rotate | number | 0 | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 | 2.42.0 |
label | Label | | 否 | 2.42.0 |
Callout 类型说明
object 类型，属性如下：
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
content | string | | 否 | 气泡上的文本，不传或者传空字符串取当前 marker 的 title | 2.15.0 |
color | Color | "#222222" | 否 | 气泡上文本的颜色，支持 HEX, RGBA, 颜色别名 | 2.15.0 |
fontSize | number | 12 | 否 | 文字大小，单位为 px | 2.15.0 |
borderRadius | number | 12 | 否 | 边框圆角，单位为 px | 2.15.0 |
padding | number | 0 | 否 | 文本边缘留白，单位为 px | 2.15.0 |
display | string | "BYCLICK" | 否 | 'BYCLICK':点击显示; 'ALWAYS':常显 | 2.15.0 |
textAlign | string | "center" | 否 | 文本对齐方式。有效值: left, right, center | 2.15.0 |
borderWidth | number | 0 | 否 | 边框宽度 | 2.34.0 |
borderColor | Color | "#000000" | 否 | 边框颜色 | 2.34.0 |
bgColor | Color | "#ffffff" | 否 | 背景色 | 2.34.0 |
anchorX | number | 0 | 否 | 相对于原地位置的横向偏移量，向右为正数 | 2.34.0 |
anchorY | number | 0 | 否 | 相对于原地位置的纵向偏移量，向下为正数 | 2.34.0 |
Label 类型说明
object 类型，属性如下：
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
content | string | | 否 | 气泡上的文本，不传或者传空字符串取当前 marker 的 title | 2.42.0 |
color | Color | "#222222" | 否 | 气泡上文本的颜色，支持 HEX, RGBA, 颜色别名 | 2.42.0 |
fontSize | number | 12 | 否 | 文字大小，单位为 px | 2.42.0 |
borderRadius | number | 0 | 否 | 边框圆角，单位为 px | 2.42.0 |
padding | number | 0 | 否 | 文本边缘留白，单位为 px | 2.42.0 |
textAlign | string | "center" | 否 | 文本对齐方式。有效值: left, right, center | 2.42.0 |
borderWidth | number | 0 | 否 | 边框宽度 | 2.42.0 |
borderColor | Color | "#000000" | 否 | 边框颜色 | 2.42.0 |
bgColor | Color | "#00000000" | 否 | 背景色 | 2.42.0 |
anchorX | number | 0 | 否 | 相对于原地位置的横向偏移量，向右为正数 | 2.42.0 |
anchorY | number | 0 | 否 | 相对于原地位置的纵向偏移量，向下为正数 | 2.42.0 |
Circle 类型说明
object 类型，属性如下：
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
latitude | number | | 是 | 纬度 | 1.63.0 |
longitude | number | | 是 | 经度 | 1.63.0 |
color | Color | "#52afff99" | 否 | 边框颜色 | 1.63.0 |
fillColor | Color | "#52afff33" | 否 | 填充颜色 | 1.63.0 |
radius | number | 100 | 否 | 半径，单位 “米” | 1.63.0 |
strokeWidth | number | 1 | 否 | 边框宽度 | 1.63.0 |
LngLat 类型说明
object 类型，属性如下：
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
longitude | number | | 是 | 经度 | 1.71.0 |
latitude | number | | 是 | 纬度 | 1.71.0 |
Polyline 类型说明
object 类型，属性如下：
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
points | LngLat[] | | 是 | 经纬度数组 | 1.71.0 |
color | Color | "#000000" | 否 | 线的颜色 | 1.71.0 |
width | number | 4 | 否 | 线的宽度 | 1.71.0 |
dottedLine | boolean | false | 否 | 是否虚线 | 1.71.0 |
colorList | Color[] | | 否 | 彩虹线，需指定不同分段的颜色，如 points 包含 5 个点，则 colorList 应传入 4 个颜色值；若 colorList 长度小于 points.length - 1，则剩下的分段颜色与最后一项保持一致。 | 2.34.0 |
borderColor | Color | "#000000" | 否 | 线的边框颜色 | 2.34.0 |
borderWidth | number | 0 | 否 | 线的边框宽度 | 2.34.0 |
Polygon 类型说明
object 类型，属性如下：
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
points | LngLat[] | | 是 | 多边形顶点经纬度数组，顺时针方向 | 2.34.0 |
strokeWidth | number | 1 | 否 | 描边的宽度 | 2.34.0 |
strokeColor | Color | "#52afff99" | 否 | 描边的颜色 | 2.34.0 |
fillColor | Color | "#52afff33" | 否 | 填充颜色 | 2.34.0 |
zIndex | number | 0 | 否 | 设置多边形 Z 轴数值 | 2.34.0 |
bindregionchange 返回值
属性名 | 类型 | 说明 | 最低支持版本 |
type | string | 视野变化开始、结束时触发；值为 begin/end | 1.71.0 |
rotate | number | 触发回调时地图的旋转角 | 2.34.0 |
skew | number | 触发回调时地图的倾斜角 | 2.34.0 |
scale | number | 触发回调时地图的缩放级别 | 2.34.0 |
centerLocation | LngLat | 触发回调时地图中心点的经纬度 | 2.34.0 |
region | Region | 触发回调时地图东北角和西南角的经纬度 | 2.34.0 |
Region 类型说明
属性名 | 类型 | 说明 | 最低支持版本 |
northeast | LngLat | 东北角经纬度 | 2.34.0 |
southwest | LngLat | 西南角经纬度 | 2.34.0 |
比例尺
scale | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
比例 | 1000km | 500km | 200km | 100km | 50km | 30km | 20km | 10km | 5km |
scale | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | |
比例 | 2km | 1km | 500m | 200m | 100m | 50m | 25m | 10m | |
扫码体验
代码示例
Bug & Tip
- •Bug：在基础库 2.42.0 版本之前(不包括 2.42.0 版本)，Android 的
callout.display 不支持 ALWAYS 属性值；- •Bug：在基础库 2.42.0 版本之前(不包括 2.42.0 版本)，Android 不支持同时显示两个 callout ；
- •Bug：在基础库 2.42.0 版本之前(不包括 2.42.0 版本)，Android 不支持 callout 向下偏移；
- •Tip：如果不传经纬度属性则默认为北京中心的经纬度；
- •Tip：
scale 在给定 include-points 时无效；- •Tip：Android 中地图组件宽高不能超过屏幕宽高（屏幕宽高包含导航栏）；
- •Tip：如果
polyline 属性的 colorList 和 color 同时存在，优先应用 colorList；- •Tip：网络请求 referer 请参考小程序网络请求特性。
点击纠错
