地图标注代码全攻略，轻松掌握标注技巧

我做了十年地图标注，发现很多人连最基本的代码都搞不定。

上周一个做餐饮的朋友找我，说花了三千块找人做地图标注，结果店铺在地图上一搜就出来个乱码。我一看，就是最简单的坐标格式写错了。这种事儿我见得太多了，今天就跟你聊聊地图标注代码到底是怎么回事。

很多人一听到“代码”两个字就头大，觉得这是程序员才能搞的东西。其实地图标注的核心代码就那么几行，你把它理解成填表格就行。比如百度地图的标注，其实就是把经纬度、名称、地址这些信息按照固定格式写进去。就像你填快递单，收件人、电话、地址写对就行，没那么玄乎。

具体怎么操作呢？打开百度地图开放平台，注册开发者账号，拿到一个叫AK的密钥。这个密钥就像你的门禁卡，没有它，地图压根不认你。然后在代码里写个简单的JavaScript函数，把标注点的经纬度填进去。经纬度怎么找？百度地图上右键就能看到，或者用坐标拾取工具。我习惯用高德的地图拾取工具，精度能达到小数点后六位。

但这里有个坑——不同地图平台的坐标系统不一样。百度用的是百度坐标系，高德用的是火星坐标系，国际通用的WGS-84坐标系在微信小程序里经常用到。你从高德复制过来的坐标直接贴到百度地图，偏差能有好几百米。我见过最离谱的案例，有人把天安门的坐标贴到百度地图，结果标注点跑到通州去了。

怎么解决？需要做坐标转换。百度地图开放平台提供了转换接口，你传一个坐标进去，它自动转成对应的坐标系。代码大概长这样：BMap.Convertor.translate(gcj02坐标, 3, 回调函数)。其中3代表从火星坐标系转到百度坐标系，回调函数里处理返回的结果。这个接口每天调用次数有限制，个人开发者一般够用，但如果你的应用流量大，得提前申请配额。

除了坐标，标注的样式也很关键。默认的蓝色气泡太单调，你可以自定义图标。比如餐厅用刀叉图标，酒店用床图标，加油站用油枪图标。代码里设置icon参数就行：var marker = new BMap.Marker(point, {icon: myIcon})。myIcon是事先定义好的图标对象，可以用本地图片，也可以用网上的图标资源。尺寸建议控制在32×32像素以内，太大影响加载速度，太小看不清楚。

标注的交互也不能忽视。点击标注弹出信息窗口，里面可以放店铺名称、电话、营业时间、优惠活动。代码也很简单：marker.addEventListener(‘click’, function(){ infoWindow.open(map); })。infoWindow是弹窗对象，里面可以放HTML内容，比如加个“立即导航”按钮。我建议弹窗内容简洁一点，别放一堆图片和视频，手机端加载慢，用户等两秒就关页面了。

批量标注是很多人的痛点。一次标几十个点，手动一个个写代码要累死。其实用循环就能搞定。把你所有标注点的经纬度、名称、地址存到一个数组里，然后for循环遍历，每个点生成一个marker对象。代码大概这样：for(var i=0;i

多图层标注是个高级技巧。比如你在地图上同时显示餐厅、酒店、景点，每个类别用一个图层。代码里用OverlayLayer对象，每个图层独立管理。点击某个类别的开关，对应的标注显示或隐藏。这个功能对旅游导览、房产展示特别有用。代码实现也不复杂，创建三个图层对象，分别添加对应的标注，然后监听UI控件的点击事件，设置图层的show或hide方法。

地图标注的坑还不少。坐标偏移、加载缓慢、弹窗卡顿、兼容性问题，每个都够你折腾半天。我建议先在小规模测试，比如先标10个点，确认没问题再批量操作。别一次性标几百个点，出了错排查起来真要命。

说几个实用工具。百度地图坐标拾取器、高德地图坐标转换工具、在线JSON格式化工具、Chrome浏览器的开发者工具（F12打开，看控制台报错）。这些工具能帮你解决90%的问题。特别是开发者工具，每次代码跑不通，先看控制台输出什么错误信息，谷歌一下基本都能找到答案。

地图标注不是高深的技术活，但细节决定成败。坐标写对了，图标选好了，弹窗设计合理了，用户体验就上来了。下次你做地图标注，别急着复制粘贴代码，先想清楚你的用户需要什么，再动手写。

掌握了这些技巧，地图标注对你来说就是手到擒来的事。遇到问题别慌，网上资料多得是，百度一下就有答案。如果实在搞不定，找个靠谱的开发者问一问，花不了几个钱。关键是别犯低级错误，比如坐标不转换、图标太大、弹窗内容太多。这些坑我替你踩过了，你绕开就行。