目录
前言
你好，我是喵喵侠，最近在开发一个大屏可视化项目时，遇到了一个让我挠头的问题，那就是大屏中的百度地图的中心点，经常在第一次加载的时候出现偏移，导致关键的点位无法准确呈现在屏幕上，而且点位偏移的很离谱。一开始，我觉得奇怪，甚至怀疑是百度地图 JavaScript API GL 本身有问题，但经过一番研究后，才发现是自己代码中的一个细节问题引发了这个 bug。
今天，我将和大家详细分享这个问题的排查与解决过程，希望对遇到类似问题的开发者有所帮助。
问题描述：地图中心点位置偏移
在项目中，我们使用了百度地图 JavaScript API GL 来加载一张行政区的地图，并且需要通过代码动态控制地图的中心点和缩放级别。需求看似很简单，但在实际运行时，我们发现地图的点位始终偏离预期，甚至有时整个地图会偏移到看不见的位置。
下图是问题出现时的效果：
原本的效果是，定位到一个制定的中心点，中心点周围有这个区域的轮廓边界。显然，上图这效果的位置和原本的位置，差了十万八千里。
剥丝抽茧：问题排查过程
1. 初步怀疑 API 的问题
最初，我怀疑是百度地图 API 的 bug，特别是 centerAndZoom 方法没有生效。于是我尝试了以下排查：
- 检查
centerPoint的经纬度是否正确。 - 确认
zoom值在合理范围内。 - 用控制台打印地图状态，发现地图的中心点和缩放级别确实发生了变化，但渲染出来的效果却不符合预期。
2. 与项目大屏动态地图宽度功能的冲突
经过进一步观察，我注意到，由于我先前为了适配不同宽度的分辨率，让地图宽度和高度随之适应，我在Vue里面用到了Computed计算动态宽高，这就导致了地图偏移的问题的出现。如果我一开始就是设置的定宽和定高，就不会出现这个问题。由此推测，这可能与项目中的动态宽高调整有关。
为了验证这个猜想，我用定时器改变了宽高，加入了打印日志，发现地图确实会重新加载，导致瓦片和点位发生错位。
3. 深入分析：地图瓦片加载未完成时操作引发的问题
一开始地图没有加载完，但执行了设置中心点和缩放，这样的呈现结果是不准确的。所以需要有个判断，知道地图什么时候加载完成，然后再执行设置中心点和缩放的操作，把位置拉回来。
解决方案：监听地图瓦片加载完成事件
要解决这个问题，核心是判断地图瓦片加载完成的时机，确保在瓦片加载完成后再去设置中心点和缩放级别。
百度地图 API 提供了一个非常有用的事件 tilesloaded，表示瓦片加载完成。基于此，我们调整了代码逻辑：
this.map.centerAndZoom(centerPoint, this.zoom); // 初始设置中心点和缩放级别 // 监听地图加载完成事件 this.map.addEventListener("tilesloaded", () => { console.log("地图加载完成"); // 再次调整中心点和缩放级别 this.map.centerAndZoom(centerPoint); this.map.setZoom(this.zoom); // 获取行政区轮廓（示例方法） this.getBoundary(points); });
代码详解
- **
centerAndZoom**的使用
centerAndZoom(centerPoint, zoom)是设置地图中心点和缩放级别的常用方法。这里需要注意的是：
centerPoint是一个包含经纬度的对象，例如{ lng: 116.404, lat: 39.915 }。zoom是缩放级别，通常为整数。
- 由于
centerAndZoom方法会立即触发地图渲染，因此放在最初调用。
- 监听
tilesloaded事件
tilesloaded是地图瓦片加载完成的标志事件。在事件回调中，我们可以安全地再次调整地图的中心点和缩放级别，确保地图显示正确。
- 缩放级别的设置
setZoom(zoom)会有一个小小的放大动画效果，为用户提供更好的视觉体验。
- 动态加载行政区轮廓
- 调用自定义方法
getBoundary(points)，动态获取区域轮廓。最终效果
通过以上优化，地图的中心点问题得到了完美解决，效果如下：
总结
回顾这次的解决过程，其实就是一次不断摸索的经验积累。起初遇到地图中心点偏移的问题时，真的有点懵，不知道咋回事。但经过多次尝试，终于找到了通过监听 tilesloaded 事件，来判断地图加载完成的方法，总算是解决了这个问题。下次再遇到类似的情况，就知道该怎么处理了，解决问题的效率肯定会高很多。整个过程虽然花了一些时间，但问题解决后的那种成就感，还是挺开心的。希望本篇文章可以帮助到你，欢迎在评论区与我交流。
