前阵子帮朋友做一个活动场地指引图，他问我说能不能在地图上把自己的工作室标出来，导航一搜就能到。我打开高德地图，点了点“新增地点”，填了名称、地址、电话，提交审核，三天后通过了。他挺惊讶，说这么简单？我说就这么简单。但后来他又问，那如果我想在网页上嵌一个地图，上面有自己画的路线，还有好几个标注点，这还能“点一点”就完成吗？这回我摇了摇头——那种需求，就得碰代码了。

其实地图标注这事儿，分两个层面。一个是给地图平台提交POI（兴趣点）信息，让人家审核通过后收录进去，这个确实不用写代码。另一个是在你自己的网页或小程序里，用地图SDK或JS API，把自定义的标注点画上去。后者才是我们今天要聊的“地图标注代码”。很多人一听代码就发怵，觉得那是程序员的事。但说实话，现在的地图开放平台把接口封装得极其友好，你只要会复制粘贴，再改几个参数，就能画出一张带标注的专属地图。

以百度地图为例，你先去lbsyun注册个开发者账号，创建应用拿到一个AK（访问密钥）。这个AK相当于你的通行证，别泄露就行。然后新建一个HTML文件，引入百度地图的JavaScript API脚本，代码长这样：。接着在body里放一个div，给它设个宽高，比如600px乘400px，再写几行初始化地图的JS——，然后。这两行代码的意思是把地图中心定在某个经纬度，缩放级别设为15。刷新浏览器，一张地图就出来了。

但光有地图还不够，你得加标注点。加标注的代码也简单：，然后。就这么两行，一个红色的大头针就扎在地图上了。如果你有好几个点，比如要标出公司周边五家合作餐厅，那就写五个这样的代码块，或者用一个for循环把这些经纬度存进数组里，循环添加。更讲究一点，你还能给每个标注点加个信息窗口，点击它弹出一个气泡，里面写上店名、电话、推荐菜。用就能实现。

有人会问，经纬度从哪来？这个最实在的办法是打开百度地图坐标拾取器，鼠标在地图上点哪儿，它就把那个点的经纬度显示出来，你直接复制进代码里就行。不用背任何地理知识，纯粹是鼠标点点点。我个人更喜欢用高德地图的坐标拾取系统，因为它能直接看到地址和经纬度的对照，省得来回切页面。不过无论用哪家，原理都一样：经纬度是标注的“灵魂”，代码只是把灵魂安放进地图的“身体”里。

如果你想做得更个性化，比如标注点的图标不用默认的大头针，想换成自己设计的Logo，那也不难。百度地图的Marker支持自定义图标，你需要先创建一个Icon对象，指定图片地址、尺寸、锚点，比如，然后把icon传给Marker的第二个参数。这样你的标注点就成了自己的小标志，一眼就能在满屏红针里认出来。我去年给一个独立咖啡馆做过这种页面，把他们的咖啡杯Logo放上去，效果特别好，朋友说看着就像“专属地图”。

再进阶一步，如果你想在地图上画一条路线，比如从地铁站走到你店的步行路径，那就要用到polyline了。，这里的p1、p2、p3是一串经纬度坐标点，你只要沿着想画的路，在坐标拾取器上多取几个点，连起来就行。不过要注意，手动取的路径是直线连接，不会沿着真实道路拐弯。想要真实路线的，得用导航API去计算，那个代码量会多一些。但对于大部分展示需求，手动画直线其实够用了，客人看个大概方向就行。

写完了代码，怎么把它给别人看？最简单的方法是直接把HTML文件发给对方，双击打开就能看。但如果你想把地图嵌到公众号文章或公司官网里，那就得考虑跨域和加载速度的问题。我的建议是，用iframe嵌入——把地图页面单独存成一个HTML，然后在你需要展示的地方用引进来。这样既不用改主站代码，也能随时更新地图内容。如果你用的是GitHub Pages或者Gitee Pages，还可以免费托管这个地图页面，生成一个永久链接，放哪都行。

说到底，地图标注代码的难点不在写，而在理解“地图只是一个坐标系，你的数据才是主角”这个思维。你不需要懂什么高深的算法，只要知道怎么把经纬度、图标、文字描述这些信息组装起来，就能做出一个让朋友眼前一亮的东西。我见过一个做花店的姐姐，她用高德API做了一个“全市花友推荐点”的地图，标注了二十多家她觉得不错的花店，每个点都写了品种特色和老板的脾气。她说自己完全没学过编程，就是照着文档一步步改参数，花了两个晚上做出来的。她那个地图页面，比很多专业公司做的都有温度。所以别怕，打开文档，复制第一行代码，你的专属地图就在下一个刷新里等着你。