静态地图标注全攻略，轻松搞定位置标记

你打开外卖App，看到商家地址旁边有个小小的地图卡片，上面标注着红点，点进去还能看个大概位置。这就是静态地图标注。听起来简单，但真到自己动手做的时候，很多人就卡壳了——要么标注位置偏了，要么样式丑得没法看，要么压根不知道从哪下手。

静态地图标注这件事，说难不难，说简单也不简单。难在细节多，简单在核心思路就一条：把经纬度坐标放到地图上，然后给它画个好看的“记号”。今天这篇就把标注的完整流程掰开揉碎了讲清楚，从获取坐标到调整样式，一步步来，保证你看完就能上手用。

先解决最基础的问题：怎么拿到一个位置的经纬度？方法有好几个，挑最顺手的就行。最简单粗暴的，打开百度地图或者高德地图，在搜索框里输入地址，然后在地图上右键，通常会有“复制坐标”的选项，点击后你就能拿到一组数字，比如“39.908823, 116.397470”，前面是纬度，后面是经度，顺序别搞反了。如果是想标注一个范围，比如一个小区或者一个园区，可以在地图上用“测距”工具，把几个关键点的坐标都记下来，后面画区域的时候用得上。还有一种情况，你手里已经有一份现成的坐标数据，比如从Excel表格里导出的，那直接跳过这步，进入下一步就行。

拿到坐标之后，接下来就是决定用哪家地图的静态图服务。国内常用的有百度地图静态图API、高德地图静态图API，还有腾讯地图的，原理都差不多。以高德为例，它的静态图服务接口地址是这样的：你只需把坐标参数拼进URL里，服务器就会返回一张图片。比如你想标注天安门，URL大致长这样：`https://restapi.staticmap?location=116.397470,39.908823&zoom=12&size=750*300&key=你的密钥`。看到没，关键的参数就三个：location是坐标，zoom是缩放级别（数字越大越近，一般12到15之间够用），size是图片尺寸（宽度*高度，单位是像素）。把URL复制到浏览器地址栏里敲回车，一张带着红色默认标注的地图图片就出来了。

但默认的红点标注太单调了，稍微正经点的场景都拿不出手。这时候就要用到静态图API的标注自定义功能。高德的静态图支持在坐标点上加自定义文字和图标，参数是`markers`，用法稍微复杂一点，但说白了就是先定义标注样式，再写上坐标位置。比如你想在标注点上显示“公司总部”四个字，还要用个蓝色图标，URL里就得加上这样的参数：`markers=mid，C:0x0088FF:公司总部|116.397470,39.908823`。这里`mid`指的是中等尺寸的标注，两个逗号中间留空表示用默认的蓝色图标，后面跟的是文字颜色和内容，再用竖线分隔坐标。如果多个点，用竖线继续拼接就行，一次最多能标几十个点，够用了。

标注样式搞定了，还有个容易踩的坑：标注位置偏了。很多人复制了坐标，标注出来却发现红点没落在目标建筑物上，而是飘在马路上或者隔了几百米。这多半是坐标系没对上。国内地图用的坐标系和GPS直接测出来的坐标不是一回事——GPS用的是WGS84坐标系，而高德地图用的是GCJ02（俗称“火星坐标系”），百度地图更特殊，用BD09。如果你从GPS设备或者谷歌地球里拿的坐标，直接填进高德静态图里，位置就会偏移几十到几百米不等。解决办法也不复杂，高德和百度都提供了坐标转换API，把WGS84坐标传过去，它会自动转成对应的坐标系。或者，你干脆直接从地图App里右键复制坐标，那个坐标本身就是和地图匹配的，不用再转换。

有时候你需要的不是单个点，而是一个范围，比如要圈出一个商圈或者一片禁行区。静态地图同样支持画多边形。拿高德来说，参数是`polygon`，用法是先把多边形的各个顶点坐标按顺序用竖线分隔，再用管道符连接。比如要画一个三角形的区域，URL里加上：`polygon=116.397,39.908|116.410,39.915|116.420,39.902`，地图上就会自动用半透明的蓝色块把这三个点围起来。这个功能在做小区范围标注、活动区域划分的时候特别实用。画好之后你还能调整透明度，参数是`fillcolor`，默认是淡蓝色，改成`0x99FF00`就能变成半透明的红色。

图片生成之后，你以为就完事了？还差一步：把图片放到你真正需要的地方。如果是放在网页里，直接写个``标签，把刚才拼接好的URL放到`src`属性里就行。这里有个细节要注意，URL里如果带了`&`符号，在HTML里要用`&`转义，不然浏览器可能解析出错。如果是放在微信公众号文章里，那就更简单了，直接把图片下载下来上传到编辑器里，但要注意高德静态图服务对免费调用次数有每日限额，个人开发者的量级是够用的，但如果你的文章阅读量特别大，图片被频繁刷新，可能会触发限流。稳妥的做法是把生成的静态图下载到本地，上传到自己的图床或对象存储，再引用，这样既能防盗链，也能减轻对API的依赖。

还有一个进阶玩法，很多人不知道：静态地图标注不只是“图”本身，它还可以带上交互链接。比如你可以在标注点上加一个跳转链接，用户点击图片上的某个区域，就能跳转到对应的导航页面或者详情页。这个功能用高德的`markers`参数里的`link`字段实现，但说实话，操作起来有点繁琐，而且静态图的点击区域不好精确控制，容易误触。如果你的需求是让用户能点击标注查看详情，更推荐直接嵌入动态地图组件，比如高德的JS API，渲染出来的地图支持各种交互。但反过来，如果你的需求只是“在文章里展示一个带标注的地图截图，让读者大概知道位置在哪”，静态标注是最高效的方案——加载快、不占资源、样式可控，而且不会因为用户拖拽地图而改变视角。

说到底，静态地图标注的本质是用最轻量的方式传递位置信息。它不需要用户等待地图加载，不需要交互，只需要一眼能看到“哦，就是这个地方”。所以，当你下次再需要给一个地址配图时，别急着截图然后拿画图工具往上硬画箭头了，花十分钟按上面的方法生成一张带精准标注的静态地图，效果天差地别。从拿到坐标，到拼接URL，到调整样式，到处理坐标系，每一步都有现成的工具和接口，你需要的只是把它们串起来。这张小小的地图图片，可能就是你文章里最让读者觉得“这作者靠谱”的细节。