跳到主要内容

高德地图

高德地图组件支持在地图上标记点位、显示信息窗口等功能

高德地图为在线地图服务，需要联网环境才能正常使用

一、效果​

二、配置步骤​

1. 添加地图​

通过菜单路径：地图 → 在线地图 → 高德地图 添加高德地图组件

2. 地图设置​

配置地图中心点、样式、显示要素与交互行为。

2.1 地图中心点坐标​

设置地图初始显示的中心点坐标，默认为北京天安门位置，可根据实际需求修改。

  • 经度：116.397428（默认值）
  • 纬度：39.90923（默认值）

2.2 地图样式​

  • 主题：默认主题为"极夜蓝"，支持切换其他主题样式

2.3 显示要素​

要素类型当前状态
区域面✔ 显示
道路✔ 显示
建筑物✔ 显示
标注✔ 显示

2.4 地图模式​

支持 2D 和 3D 两种显示模式，模式切换后需要保存并刷新页面才能生效。

  • 2D：标准 2D 平面地图模式
  • 3D：3D 立体地图模式，支持设置仰角角度，其他功能与 2D 模式相同

2.5 缩放级别​

  • 默认级别：15
  • 范围：2 - 26（数值越大，地图显示越详细）

2.6 旋转与文字​

  • 旋转：可将地图旋转
  • 仰角度：与3D地图模式配置使用，可设置地图的仰角角度

3. 地图标记点配置说明​

3.1 标记点样式​

标记点样式可设置为图片

  • 图片：标记点默认的样式，可自定义上传；
  • 图片字段：数据中传入的图片字段，设置后图片原有默认的不再展示；例如：imgUrl
  • 宽度：82 px
  • 高度：120 px
  • 偏移量 X：-41 px（水平居中）
  • 偏移量 Y：-60 px（垂直对齐底部）

3.2 显示信息窗口​

属性值
触发方式划过 / 点击
窗口宽度224 px
窗口高度113 px
内边距未设置（默认）
背景图drag/lib/img/bg.png
背景色#000000
偏移量 X0 px
偏移量 Y-55 px

3.3 标题栏​

  • 显示标题：是
  • 字段映射：title
  • 字体大小：16 px
  • 字体粗细：粗体
  • 对齐方式：居中
  • 行高：23 px

3.4 内容区​

  • 字体大小：11 px
  • 行高：16 px
  • 左边距：25 px
  • 字段映射（新增列）：
列名称字段映射
公司company
类型type
状态status
时间time

支持动态添加更多列，映射字段实时生效。

4、数据格式​

[
  {
    "longitude": 116.391466,
    "latitude": 39.907425,
    "title": "湘B.8J1VS",
    "company": "小米集团",
    "type": "轿车",
    "status": "正常",
    "imgUrl": "drag/lib/img/car-normal.png", 
    "time": "2025-08-08 10:00:00"
  },
  {
    "longitude": 116.382122,
    "latitude": 39.913553,
    "title": "鄂B.8J1VS",
    "company": "苹果集团",
    "type": "货车",
    "status": "异常",
    "imgUrl": "drag/lib/img/trucks-abnormal.png",
    "time": "2025-08-05 10:00:00"
  },
  {
    "longitude": 116.411722,
    "latitude": 39.908215,
    "title": "京B.8J1VS",
    "company": "香蕉集团",
    "type": "轿车",
    "status": "异常",
    "imgUrl": "drag/lib/img/car-abnormal.png",
    "time": "2025-08-05 10:00:00"
  },
  {
    "longitude": 116.40683,
    "latitude": 39.909795,
    "title": "沪B.8J1VS",
    "company": "香蕉集团",
    "type": "货车",
    "status": "正常",
    "imgUrl": "drag/lib/img/trucks-normal.png",
    "time": "2025-08-05 10:00:00"
  }
]