跳到主要内容
Termlib

UI 组件 · 数据展示

地图

Map

也叫：地图组件、地图控件、位置地图、Map View、Map Embed、Interactive Map

在页面里嵌入一块可以拖动、缩放的地图，用标记点显示门店、地址或配送位置，点击标记弹出详情。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

做一个门店查询页：左侧 360px 宽的门店列表，顶部是搜索框和「附近 / 全部城市」切换，每项显示门店名、地址、营业时间和距离；右侧用高德地图（或 Leaflet）铺满剩余空间，用品牌色图钉标出所有门店，标记太多时聚合成带数字的圆点。点击列表项，地图平移到对应门店并弹出信息窗（门店名、地址、电话、「导航」按钮）；点击地图上的标记，列表滚动到对应项并高亮。右下角放「+ / −」缩放和「定位到我」按钮。地图先显示灰色占位，进入视口后再加载脚本；页面滚动时滚轮不缩放地图，按住 Ctrl 才缩放。手机上改成上面地图（高 240px）、下面列表。

发给

01判断

你的内容是这样吗？

对照两列，确认地图是不是你要找的。

符合这些情况，用地图

  • 「联系我们」、活动详情页标出一个具体地址，方便用户找过去
  • 门店、网点、房源、酒店查询，需要按位置浏览和比较
  • 外卖、快递、打车这类需要实时显示位置和路线的场景

是这些情况，换成别的

  • 只需要告诉用户一个地址，写清楚文字地址，再加一个「在地图中打开」链接就够了

  • 邮件、打印页这类不能交互的地方，用静态地图图片

    改用图片

  • 按省份、城市对比数据（例如各地销售额），用地图类的图表，而不是可以拖动的地图

    改用图表

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    页面滚到地图时，滚轮被地图截住开始缩放，页面再也滚不下去

  2. 02

    只放了一个地图标记，没有文字地址，用户想复制地址都做不到

  3. 03

    一进页面就加载好几张大地图，首屏卡顿，流量也浪费

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由可以拖动缩放的地图画布、位置标记（可以聚合）、点击标记弹出的信息窗、缩放和定位按钮组成，常和一侧的地点列表或搜索框搭配。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一块带街道、河流、绿地的地图画面，上面有水滴形的图钉标记
  2. 2角落里有「+ / −」缩放按钮和地图服务商的标志
  3. 3点击标记后在它上方弹出一个带名称和地址的小白框

04解释

详细解释

地图组件把高德、百度、腾讯、Google Maps 或开源的 Leaflet、Mapbox 地图嵌进页面：可以拖动，用滚轮或双指缩放，角落里有「+ / −」缩放按钮和「定位到我」，上面用图钉一样的标记点表示位置。点击标记弹出一个小信息窗，写着名称、地址、营业时间和「导航」按钮。常见用法有：「联系我们」页标出公司地址，门店查询页左边列表、右边地图，外卖和打车显示配送轨迹，房源和酒店显示位置分布。

它和 图片 的区别：一张静态地图截图只能看，不能拖动和点击，适合只需要示意位置的地方（邮件、打印页）；真正的地图组件可以交互，但要加载地图服务商的脚本和 API Key。门店查询这类页面常用「列表 + 地图」的 主从布局：点击列表里的一项，地图移到对应的标记；拖动地图，列表刷新成当前可视范围内的门店。

地图很重，只在需要的页面加载，先用灰色占位或静态图，进入视口或用户点击后再加载可交互的地图。页面滚动时滚轮不要被地图截住（改成按住 Ctrl 才缩放，或者点击后才能拖动），手机上单指要能正常滚动页面。标记太多时聚合成带数字的圆点。地址一定要有文字，不能只靠地图表达位置；API Key 要限制域名，避免被盗用。国内项目注意坐标系（高德、腾讯用 GCJ-02，百度用 BD-09）。

开发者信息
术语 ID
component-map
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .leaflet-container
  • .mapboxgl-map
  • .maplibregl-map
  • .gm-style
  • gmp-map
  • .amap-container
  • .ol-viewport
  • .cesium-viewer
  • .esri-view
  • iframe[src*="google.com/maps"]
  • iframe[src*="maps.google."]
  • iframe[src*="openstreetmap.org"]
  • iframe[src*="map.baidu.com"]
  • iframe[src*="amap.com"]
  • iframe[src*="map.qq.com"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • map
  • map-view
  • map-canvas
  • map-embed
  • location-map
  • store-map
  • google-map
  • gmap
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Map
  • MapContainer
  • MapView
  • GoogleMap
  • BaiduMap
  • MapboxMap
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30