高德地图 web 端 JS API 遇到的坑及性能优化

【JS API V2.0】

本指望全面提升一下性能，结果发现一些硬伤，迫不得已转到1.4.15版本，先说一下最新的v2.0的问题。

1. 因为务业需要规划线路，但是这个版本中，规划线路，并且经过中间点时，部分window 7 旗舰 chrome 报错，报错信息:Uncaught Error: createProgram fail  chrome 版本 81.0.4044.113（正式版本） （64 位） win7 64位即便是官方demo 也会报错，后来和提交工单，回复未复现，后来工期急就没跟踪，上线后有极少部分用户反馈报错
2. LabelMarker 部分点位在地图放大到一定程度后 不再触发click mouseover 等事件，极少量点位会出现这种情况，目测是某些点位附近可能有什么隐藏物吧，总之就是不触发，但是奇怪的是，同样的经纬度有时确是可以正确触发事件，也可能是LabelMarker 有问题
3. dblclick 事件 LabelMarker 的dblclick 事件 触发的同时还会触发click 事件，如果同时绑定click 事件 那就尴尬了，先触发click 再触发dblclick 事件，目测是底层对dblclick 处理有问题，click 事件应该有300ms 延时以确认是否有双击，这个还好，可以手动纠正，

【JS API V1.4.15】

1. SvgMarker  在创建及地图缩放时的处理有极大的性能问题，SvgMarker 本身不建议大量的点位应用，海量点不合适的话，建议使用LabelMarker，
2. LabelMarker 在这个版本不提供dblclick 事件，解决办法就是手动判断两次点击是否超300ms 来断定
3. LabelMarker 实例 第一次调用setText setIcon 后再次调用方法不起作用，解决办法，调用前先隐藏，调用后再显示，
4. LabelMaker 在某些座标下的某种缩放级别时（10+）事件不触发，暂未发现

【性能优化】

先说结论，再说问题

1. 关掉所有能关掉的动画效果 （参照文档）
2. SvgMarker 创建时请先隐藏，添加完成后再显示，或使用 AMap.OverlayGroup 统一处理下
3. 如果点位超过500还是不要用SvgMarker 试试LabelMarker，并关掉动画
4. 千万要慎用地图实例 setFitView 方法，如果要用请一定要带上参数，禁掉动画，可以使用地图实例的setBounds方法或setZoomAndCenter 等曲线救国，后面会说这个问题的严重性
5. 认真阅读官方文档，很多时候是使用不规范造成的性能问题

下面来看下1.4.15版本创建4000 SvgMarker 的性能问题

8.67 s 创建用了这么长时间。。。

再看其中一个SvgMarker性能开销，

使用地图实例的add 方法添加 一组SvgMarker ，显然它们是被一个个加到页面当中的，这些marker dom节点被不断的加入dom必然引起性能开销，根据dom性能优化策略，可以在创建时就指定marker 为隐藏，后边再显示， 或是用官方的AMap.OverlayGroup处理，经此处理后，创建SvgMarker性能有了较大提升，4000点位用时不到3s

再往下看setFitView 的性能问题

1.9 min 。。。

再往下看这密密麻麻的是什么

 不知道在执行什么鬼动画，明明感觉已经把动画都关了呢，点进去看看，

实在是报歉，这个段源码目测是个公共方法，一定在一个地方在调用，修改它是徒劳的,也可能是api的某个方法会触发它，原来的业务逻辑 在4000 marker 创建后会修复一下视图范围，原来就直接调用了setFitView ，会不会是它呢？干掉它，一试，果然，

怪不得就算是 v2.0 api 使用labelMarker都能卡成狗，被这货给坑了。

虽然4000点位已经跑进3s内但为了支撑1万+点位的marker  新需求，显然不能再使用SvgMarker 经过计算发现1万点位性能开销要6s，实在是不合适，好在1.4.15版本提供了labelMaker 作为海量点同样为了达到svgMaker一样的外观效果，可以指定svg 作为icon 即便你需要动态的改变它的颜色等，贴出代码（和SvgMarker 一样的水滴形状）

export const getSVGSrc = (color: string) => {
    return `data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2245%22%20height%3D%2260%22%20%3E%3Cg%20%3E%3Cpath%20stroke-width%3D%220%22%20fill%3D%22${encodeURIComponent(color)}%22%20d%3D%22M22.5%2C0C10.043%2C0%2C0%2C9.75%2C0%2C21.75C0%2C41.125%2C22.5%2C60%2C22.5%2C60s22.5%2C-19.25%2C22.5%2C-38.25C45%2C9.75%2C34.958%2C0%2C22.5%2C0z%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E`
};

需要注意的是labelMaker 是不会被地图实例的clearMap 方法所清除，要清除请使用labelsLayer 的clear 或remove 方法

下面来看labelMaker的性能开销情况（同样4000点位）ps:准确的说此时maker还未绘制

下面看2万点的完整绘制时间

2万点创建耗时

绘制耗时4S左右

咨询高德 地图渲染就是靠动画帧驱动的所以有这个耗时，后边的Microtasks目测也是绘制的一部分

暂时告一段落，可以松一口气，待续其它性能问题