最近我在折腾一个项目，需要在网页上搞个地图，标几个点，还得让用户自己点进去看详情。试了一圈方案，发现最靠谱的还是地图标注API。这东西说白了就是地图服务商给开发者开的一扇后门，允许你在底图上画标记、弹气泡、甚至定制样式。听上去挺唬人，但用起来其实没那么复杂。就拿高德和百度来说，几行代码就能让一个坐标变成可点击的图标。

先聊最基础的操作——往地图上扔一个标记点。你只需要一个经纬度坐标，比如“116.397428, 39.90923”这个北京天安门的位置，然后调用API里的“Marker”类。代码长这样：，再把它加到地图实例上，点就标上去了。但别急着高兴，默认的标记图标是个蓝色水滴，丑得不行。所以第一步就是换图标。你可以传一个“icon”参数，指向一张自定义图片。比如我要标咖啡店，就放个咖啡杯的图标，30x30像素就够。这里有个坑：图片得是透明背景的PNG，否则白底会把地图遮住，看着像贴了膏药。

光有图标不够，用户点上去得有点反应吧？这时候就需要“信息窗体”出马。信息窗体就是那个弹出来的小气泡，里面可以放文字、图片甚至HTML。代码上，你先定义一个“infoWindow”对象，比如，然后给标记绑定一个点击事件：。这样用户一点标记，气泡就飘出来了。注意，内容别写太长，移动端屏幕小，弹窗占一半地图很烦人。我一般控制在两行文字加一张小图，够用就行。

接着说说批量标注。你手里要是有一堆坐标，比如全城连锁店的地址，一个个手动写代码能累死。正确做法是把数据存成JSON数组，循环遍历。伪代码大概是：。这样一百个点几毫秒就生成完。但有个性能问题：点太多了地图会卡，尤其是手机端。解决办法是用“聚合图”或者“点聚合”功能——把相邻的点合并成一个圆圈，数字显示数量，缩放级别变高时才展开。高德和百度都提供了聚合插件，引入后配置个“gridSize”参数，比如80像素，就自动合并了。实测5000个点无压力。

你以为这就完了？自定义标记的精髓在于样式。默认标记就一个图钉形状，太单调。你可以用“MarkerShape”接口把标记改成圆形、矩形或者任意多边形。比如要标个停车场，就画个圆角矩形，填充蓝色半透明，边框白色实线。代码里设置，然后调整“offset”让图标居中。更骚的操作是让标记动起来——加个CSS动画，每次用户滚动地图时标记抖一下，或者闪个光。但这得配合“moveTo”方法，比如，让标记从A点滑到B点。适合做导航演示或者历史轨迹回放。

说到轨迹，地图标注API还能玩更多花样。比如给标记加个“label”——就是那个小文字标签，默认显示在图标下方。你可以设，让字母A浮在图标上方。这招适合给多个点编号，比如1、2、3，用户一看就知道顺序。但注意，label内容不能太长，否则会重叠。还有“extData”属性，能往标记上挂载自定义数据，比如门店ID、电话，存成。后面取数据时用，配合事件处理，比如点标记弹窗时直接显示电话，省得再查数据库。

另一个实用技巧是条件筛选。比如地图上标了50家餐厅，用户只想看火锅店。你可以给每个标记加个“type”属性，比如，然后写个过滤函数：。但别真这么干，remove再添加很耗性能。更好的做法是控制标记的“visible”属性：，隐藏不相关的点，只显示火锅。这样地图不重绘，丝滑切换。我做过一个项目，用这招实现了按价格区间筛选房源，用户拖动滑块，标记实时增减，反馈快得像本地应用。

说说坑和优化。最头疼的是坐标转换。很多数据源给的GPS坐标（WGS84），跟高德用的国测局坐标（GCJ02）不一样，直接标会偏几百米。解决办法是用“convertFrom”方法，传一个坐标数组，回调里拿到转换后的坐标再标点。另外，标记数量超过200个时，建议用“AMap.MarkerClusterer”来做聚合，否则浏览器会卡成PPT。还有，别把信息窗体的内容写成死的，用模板字符串动态生成，比如

回到开头说的“轻松实现自定义标记”，其实关键就三步：选对API、吃透参数、处理好数据。地图标注API本质上就是个图形渲染引擎，你给它坐标和样式，它负责画出来并响应点击。别被文档里的专业术语吓到，什么“像素坐标”“地理编码”，拆开看都是小学数学。下次你老板说“在地图上标300个点，每个点要能弹出详情页”，你心里就有底了——先准备JSON数据，再写个循环，调好图标和气泡内容，半小时搞定。剩下的时间泡杯茶，想想怎么让标记闪烁或者变色，那才叫自定义的乐趣。