B 端的一些业务场景中常会使用地图元素来展示信息

B 端的一些业务场景中常会使用地图元素来展示信息，但是 B 端的页面情况较为复杂多变，与 C 端的百度地图等使用场景以及业务具有一定的差异性。在工作中，我们对于地图页面的布局、交互统一性上的研究还是较少，所以我进行了业务场景下的列表与地图的关系的设计沉淀。

一、常规地图样式

地图作为一种将地理信息以二维的手段展示的图像。日常纸质地图常常会分为两个模块：地图信息、列表信息。对于现 Web 端的产品，地图也保留两者的信息区域并进行不同的布局排布，如百度地图等。针对 Web 端的产品，因为有交互形式的出现，所以在地图上会存在更多的信息展示。

1. 地图信息

• 地理信息： 以可视化手段、数理的方式将地理信息处理后的信息。
• 打点地址：打点在地图上的位置分布，其可看作一个基于地理信息的可视化方式。
• 在图上显示点位的信息。

2. 列表信息

• 打点列表主要信息：运用列表的形式展示打点的初步信息。
• 打点的详情信息：针对打点有再次下钻的能力，来显示单个打点的详情信息。

二、现业务中常见地图设计

针对现在工作、学习过程中遇到过的具有地图元素的业务，我进行了整理，并总结出了一些不同场景下存在情况以及现业务阶段存在的问题。

首先我总结了列表的信息与地图信息的关系，一共为三种不同的情况。

• 一对一：列表与点位一对一的映射；
• 点位内容范围大于列表内容；
• 列表内容范围大于点位内容。

随后，我针对打点详情信息的复杂度进行了三种程度的区分：简单；复杂；极复杂（较少）。

最后，我走查线上业务版本发现了一些现地图元素的一些问题。

1）排版不统一

针对地图的两种布局，使用较为随意，并没有规定其合适的场景使用不同的排版形式。