小i约球诞生记06：约球小程序里，地图 marker 到底该怎么设计
本文是「小i约球诞生记」系列文章之一。
小i约球是一个微信小程序，主要帮乒乓球、羽毛球、台球、网球爱好者找到附近合适的球友。本文从一个具体技术或产品问题切入，记录约球小程序从 0 到 1 过程中的设计取舍。
小程序：微信搜索「小i约球」
前言
做附近球友地图时，marker 很容易被低估。
一开始会觉得它只是地图上的一个点。用户在附近发布了约球信息，就在地图上放一个图标；有人找乒乓球搭子，就放一个乒乓球 marker；有人找羽毛球搭子，就放一个羽毛球 marker。看起来很直接。
但真正做约球小程序，会发现 marker 不是装饰，它是地图页的信息入口。
用户打开地图，不会先读一堆文字。他会先看附近有没有人、离自己远不远、是什么球类、是不是值得点进去。marker 设计得好，用户能快速判断；设计得乱，地图会变成一片噪音。
marker 要解决什么问题
约球地图上的 marker，至少要回答三个问题。
第一，这里有人吗？
对找搭子的人来说，地图的第一层价值是“附近球友是否存在”。如果周边完全没有点，用户会觉得这个地方没人用；如果点太多又没有区分，用户会不知道从哪里看起。
第二，是什么运动？
乒乓球约球、羽毛球约球、台球约球、网球约球不是同一种需求。一个人想找羽毛球搭子，地图上全是无法区分的点，他就必须挨个点开看，体验会很差。
第三，值不值得点进去？
marker 不一定要展示很多信息，但最好能给一点判断线索。比如球类、活跃状态、是否有头像、是否是附近多人聚集的位置。地图页最怕的是每个点都长得一样，用户只能盲点。
所以 marker 的设计，本质上是在“信息量”和“地图清爽”之间取平衡。
不要一上来就把头像塞进 marker
很多社交类产品会想把用户头像直接放在地图上。这个方案很有吸引力，因为头像比普通图标更像“真人”。
但在小程序地图里，我会比较谨慎。
头像 marker 有几个现实问题。图片要稳定加载，尺寸要统一，圆角和裁剪要处理，不同手机上的显示效果还要看。更麻烦的是，头像来源如果不稳定，地图上就会出现空白、裂图或加载慢的问题。
对约球产品来说，头像当然有价值。用户找附近球友、找运动搭子时，看到真实头像会更有信任感。但头像不一定适合放在第一层 marker 上。
我更倾向于分层处理：
- 第一层 marker 用球类图标或简化头像，保证稳定和可读性。
- 点击 marker 后，再展示更完整的信息，比如头像、昵称、球类、距离、约球偏好。
- 如果头像加载失败，要有默认占位，不要让地图出现空点。
这样做没那么炫，但更稳。
球类图标比通用图钉更有用
如果一个地图上全是同样的红色图钉，用户只能知道“这里有点”，不知道“这里有什么”。
约球场景更适合用球类区分。
乒乓球、羽毛球、台球、网球，本身就有很强的视觉识别度。用户扫一眼，就能知道附近是哪些运动的人更多。比如家附近有几个羽毛球点，公司附近有两个乒乓球点，这比统一图钉有效得多。
不过图标也不能做得太复杂。
marker 在地图上通常尺寸不大，细节太多反而看不清。真正好用的 marker，应该在小尺寸下也能识别：颜色明确，轮廓简单，状态不要太多。
我会避免在一个 marker 上同时塞球类、头像、等级、距离、在线状态。信息太满，最后谁也看不清。
callout 不要当详情页用
小程序 map 组件支持 marker 气泡，也可以做一定程度的自定义展示。它适合展示一小段信息，比如球类、距离、简单提示。
但不要把 callout 当详情页。
地图本身是浏览和选择入口，不适合承载太复杂的内容。尤其在手机屏幕上，地图区域本来就有限，气泡一多，很容易遮挡 marker，也容易挡住用户正在看的位置。
更舒服的方式是：marker 负责吸引点击，点击后用底部面板或详情页展示完整信息。
比如用户点到一个羽毛球约球 marker，底部可以展示这个球友的大致位置、水平、可约时间、约球偏好。用户想进一步了解，再进入详情。
这样地图保持干净，信息也不会丢。
点太多时，要考虑聚合和筛选
早期产品最怕地图上没点。可一旦某个区域用户变多，问题会反过来：点太多。
附近球友一多，marker 会互相遮挡。尤其是球馆、商圈、学校附近，很多约球需求可能集中在同一片区域。这个时候如果所有 marker 都直接铺出来，用户看到的是一团点。
处理方式有几种。
最简单的是按地图缩放级别控制展示。缩放较小时，展示区域级别的数量或简化点；放大后，再展示具体球友 marker。
第二种是按球类筛选。用户只想找乒乓球搭子，就没必要同时看羽毛球、台球、网球的点。
第三种是做轻量聚合。比如同一小片区域有多人，可以先显示一个聚合点，点开后再展开。
这些都不是炫技，而是为了让地图还能读。
原生 map 组件的取舍
小程序原生 map 组件的好处很明显：接入成本低，和微信小程序环境贴合，基础的中心点、缩放、markers、marker 点击、视野变化都能覆盖。
对一个早期约球小程序来说，这已经够用了。
它的限制也要接受。原生组件的样式自由度不如 Web 地图库，复杂动画、特别细的交互、完全自定义覆盖层都没那么随心所欲。真机表现也要测，不能只看开发者工具。
所以我的判断是：第一阶段不要急着接复杂地图 SDK。先把附近球友、球类筛选、marker 点击、底部信息面板这些基础体验做好。等真的需要更复杂的 POI、路线、聚合、热力或商圈能力，再考虑引入外部地图服务。
技术上少一层依赖，早期会轻很多。
小结
地图 marker 看起来只是一个小图标，实际会影响用户对“附近有没有人”的第一判断。
在约球小程序里，marker 设计不要只追求好看。更重要的是稳定、清楚、可点击、能区分球类，并且不要把地图变成信息垃圾场。
我的倾向是：第一层 marker 保持简单，重点表达球类和位置；点击后再展示头像、距离、水平、约球偏好等更多信息。头像可以用，但不要让头像加载稳定性拖垮地图体验。
如果你正在找附近球友、乒乓球搭子、羽毛球搭子，或者想发布本地约球信息，可以试试小i约球。
---
本文属于「小i约球诞生记」系列。
项目官网：https://iyueqiu.cn 微信小程序：搜索「小i约球」
