在上一篇博客中关于Vue表单验证的话题里，我提到了这段时间在做的城市配载功能，这个功能主要着眼于，如何为客户提供一条路线最优、时效最短、装载率最高的路线。事实上，这是目前物流运输行业智能化、专业化的一个趋势，即面向特定行业的局部最优解问题，简单来说，怎么样能在装更多货物的同时满足运费更低的条件，同时要考虑超载等等不可抗性因素，所以，这实际上是一个数学问题。而作为这个功能本身，在地图上加载大量标注更是基础中的基础，所以，今天这篇博客想说说，通过百度地图API加载海量标注时，关于性能优化方面的一点点经验。

问题还原

根据IP定位至用户所在城市后，后台一次性查询出近一个月内的订单，然后将其全部在地图上展示出来。当用户点击或者框选标注物时，对应的订单配载到当前运单中。当用户再次点击标注物，则对应的订单从当前运单中删除。以西安市为例，一次性加载850个左右的订单，用户操作一段时间后，Chrome内存占用达250多兆，拖拽地图的过程中可以明显地感觉到页面卡顿。因为自始至终，地图上的订单数量不变，即不会移除覆盖物，同时需要在内存中持久化订单相关的信息。所以，在城市配载1.0版本的时候，测试同事给我提了一个性能方面的Bug。可开始提方案并坚持这样做的，难道不是产品吗？为什么要给开发提Bug呢？OK，我们来给不靠谱的产品一点点填坑吧，大概想到了下面三种方案，分别是标注物聚合、Canvas API和视野内可见。

标注物聚合方案

所谓“标注物聚合”，就是指在一定的地图层级上，地图上的覆盖物主要是以聚合的形式显示的，譬如显示某一个省份里共有多少个订单，而不是把所有订单都展示出来，除非地图放大到一定的层级。这种其实在我们产品上是有应用的，比如运单可视化基本上是全国范围内的车辆位置，这个时候在省一级缩放比例上使用聚合展示就非常有必要。可在城市配载这里就相当尴尬啦，因为据说客户会把地图放大到市区街道这种程度来对订单进行配载，所以，这种标注物聚合方案的效果简直是微乎其微，而且更尴尬的问题在于，官方的 MarkerClustere