抖音开放平台Logo
开发者文档
小程序
“/”唤起搜索
控制台
  • 组件概述
  • 基础内容
  • 视图容器
  • 表单
  • 导航
  • 媒体
  • 画布
  • 地图
  • map 地图
  • 开放能力
  • 行业开放
  • 原生组件
  • 拓展组件

    • map 地图
    收藏
    我的收藏

    基础库 1.63.0 开始支持本组件。
    地图组件。相关 API tt.createMapContext。

    属性说明

    属性名
    类型
    默认值
    必填
    说明
    最低支持版本
    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
    ​
    否
    标记点上方的气泡窗口，支持的属性见 Callout，可识别换行符。有了 callout 将不显示 title
    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
    ​
    否
    为标记点旁边增加标签，支持的属性见 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
    arrowOption
    ArrowOption
    ​
    否
    线的箭头配置
    3.68.0

    ArrowOption 类型说明

    object 类型，属性如下：
    属性名
    类型
    默认值
    必填
    说明
    最低支持版本
    show
    boolean
    false
    否
    是否显示路径指向箭头
    3.68.0
    color
    Color
    "#ffffff"
    否
    路径指向箭头颜色
    3.68.0
    width
    number
    2
    否
    路径箭头宽度
    3.68.0
    spaceWidth
    number
    40
    否
    路径箭头之间的间距
    3.68.0
    使用说明
    箭头的方向由当前 polyline 的 points 数组决定，第一个元素为起点，最后一个元素为终点。
    推荐配置：
    arrowOption: {
    show : true,
    color : "#ffffff",
    width : 2, // 推荐 width 设置为道路宽度的五分之一到四分之一
    spaceWidth : 40,
}
    iOS 效果如下：
    Tips
      •iOS 系统不建议设置过于密集的箭头，该操作会导致极大的渲染压力。
      •iOS 系统实现逻辑为箭头的绘制更新跟随整体地图的更新，因此当用户缩放地图时会出现箭头不跟随的现象，这属于符合预期的行为。
      •在 IDE 中，map 组件箭头配置（arrowOption）仅支持 show 属性调试，其他属性配置需使用真机进行验证。
    以下是各个参数的作用效果参考图：

    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；
    ​