地图标注代码从零到一，手把手教你精准定位

打开手机地图，输入一个地址，导航精准地把你带到目的地——这个过程顺滑得让人几乎注意不到背后发生了什么。但如果你自己动手写过地图标注代码，就会知道，那个蓝色小圆点之所以能稳稳落在正确的位置上，背后是一整套坐标系转换、经纬度校验和渲染逻辑在默默工作。今天我不打算绕弯子，直接从零开始，用最笨的办法，一步步把地图标注代码写出来。你不需要有GIS背景，只要会一点JavaScript，跟着敲，就能让一个坐标点老老实实出现在地图上。

先搞清楚最基础的事：地图标注到底在标什么。说白了，就是把一对经纬度数字，比如北纬39.9042度、东经116.4074度，转换成屏幕上像素的位置。这里头有个坑——地球是个不规则的椭球体，而屏幕是平的，所以必须借助投影算法。绝大多数在线地图用的都是Web Mercator投影，它把地球切成一块块正方形的瓦片，每级缩放级别对应不同的比例尺。你标注一个点，代码要做的是：拿到经纬度，算出现在这个点在第几级瓦片上的坐标，再换算成相对于当前视图中心的偏移量，画一个标记上去。这套逻辑听起来复杂，但核心代码其实就二十来行。

我建议你第一行代码别急着写业务逻辑，先建一个空的HTML页面，引入一份地图SDK。以高德地图为例，它的JavaScript API允许你申请一个免费Key，然后在页面里初始化一个Map实例。关键参数就三个：容器ID、中心点经纬度、缩放级别。比如你设置中心点在天津之眼（117.1967, 39.1521），缩放级别设成15，地图就会以那个摩天轮为中心显示周围几百米的路网。这一步跑通了，你的地图容器就活了，接下来才谈得上“标注”。

标注的第一种方式，也是最直观的：直接在地图实例上添加一个Marker对象。代码极其简短——new AMap.Marker({position: [lng, lat], map: map})。就这么一行，一个默认样式的红色大头针就会钉在指定坐标上。但你要是真用这个上线，用户大概率会吐槽：这针尖对得准吗？因为Marker的锚点默认在图形底部中心，而经纬度对应的实际位置恰恰是那个针尖。所以你得调整offset，把锚点往上挪几个像素。这种细节没人提醒你，只能自己试。我第一次写的时候，标注的位置在视觉上偏了大概十米，在卫星图上一眼就能看出来，别提多尴尬了。

不过，只加一个固定点太小儿科了，真实场景里，你通常需要处理动态数据——比如用户搜索一个地址，你要把结果标出来。这时候就涉及地理编码，也就是把“北京市朝阳区望京SOHO”这样的文字转成经纬度。高德提供了Geocoder插件，调用方式很直接：new AMap.Geocoder().getLocation(address, callback)。回调里返回的lnglat对象，直接塞进Marker就行。但这里有个容易踩的坑：返回的坐标是GCJ-02坐标系，也就是俗称的“火星坐标”，它跟GPS原始坐标WGS-84差了大概几百米。如果你拿手机GPS直接采的经纬度往地图上标，不做坐标偏移转换，位置就会歪到隔壁小区。所以正规做法是引入坐标转换工具，或者用地图SDK自带的转换接口。

写到这里，你可能已经发现，地图标注代码真正的难点不在“画一个点”，而在“准确”。除了坐标系，还有缩放级别的影响——你缩放级别设成10，一个城市的范围在屏幕上可能也就几十个像素，两个相邻的标注点就会重叠。这时候你需要做聚合标注。高德有个MarkerClusterer插件，用法不复杂：把所有Marker放进一个数组，new AMap.MarkerClusterer(map, markers)。它自动根据缩放级别合并重叠的标记，显示数字角标。但注意，聚合插件对Marker数量有性能下限，少于50个点的时候，聚合反而会让交互变慢，这时候你就不如老老实实全画出来。

说到交互，一个标注点除了“显示”，还得“能点”。给Marker绑定事件是最基本的功夫：marker.on('click', function() { infoWindow.open(map, pos) })。这里面有个细节很多人会忽略——移动端和桌面端的事件机制不一样。在PC上，click事件响应很快，但在手机上，如果用户是想拖动地图，手指在Marker上滑了一下，也会触发click。所以你在移动端最好用tap事件，或者自己判断touchstart和touchend的位移差。我见过不少半吊子代码，PC上好好的，一上手机就误触，就是这个原因。

再往深一层，如果你要在标注上显示自定义内容，比如店铺名字、价格标签，那就得自己写HTML模板，然后通过content属性传进去。这里有个性能陷阱：如果你有几百个自定义样式的Marker，每个都创建独立的DOM节点，页面会卡成PPT。解决办法是Canvas渲染或使用Loca这类可视化组件。但那是另一个量级的复杂度了，对于大多数业务场景，几十个Marker用DOM方式足够，别过早优化，等到卡了再换方案也来得及。

等你把上面这些全跑通，恭喜你，你已经完成了地图标注从零到一的核心闭环。但我想再强调一次：精准定位这件事，代码只是一步。真正决定“准不准”的，是你有没有处理好坐标系的转换、有没有在合适的缩放级别下做聚合、有没有根据设备类型调整交互方式。我见过太多人把全部精力花在样式上，结果坐标偏移几百米，用户一用就骂娘。地图标注不是写花架子，是写地基。地基歪了，上面盖什么都白搭。所以，从你第一次运行代码开始，就养成一个习惯：拿真实设备，到真实街道上，对比一下你标注的点和实际位置差多远。那个误差，才是你真正要修的东西。