如何解决百度地图 JavaScript API GL 出现中心点位置偏移的问题

目录

• 前言
• 问题描述：地图中心点位置偏移
• 剥丝抽茧：问题排查过程
  • 1. 初步怀疑 API 的问题
  • 2. 与项目大屏动态地图宽度功能的冲突
  • 3. 深入分析：地图瓦片加载未完成时操作引发的问题
• 解决方案：监听地图瓦片加载完成事件
• 代码详解
• 最终效果
• 总结

前言

你好，我是喵喵侠，最近在开发一个大屏可视化项目时，遇到了一个让我挠头的问题，那就是大屏中的百度地图的中心点，经常在第一次加载的时候出现偏移，导致关键的点位无法准确呈现在屏幕上，而且点位偏移的很离谱。一开始，我觉得奇怪，甚至怀疑是百度地图 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);
});

代码详解

1. centerAndZoom的使用
   • centerAndZoom(centerPoint, zoom) 是设置地图中心点和缩放级别的常用方法。这里需要注意的是：
     • centerPoint 是一个包含经纬度的对象，例如 { lng: 116.404, lat: 39.915 }。
     • zoom 是缩放级别，通常为整数。
   • 由于 centerAndZoom 方法会立即触发地图渲染，因此放在最初调用。
2. 监听 tilesloaded 事件
   • tilesloaded 是地图瓦片加载完成的标志事件。在事件回调中，我们可以安全地再次调整地图的中心点和缩放级别，确保地图显示正确。
3. 缩放级别的设置
   • setZoom(zoom) 会有一个小小的放大动画效果，为用户提供更好的视觉体验。
4. 动态加载行政区轮廓
   • 调用自定义方法 getBoundary(points)，动态获取区域轮廓。最终效果

通过以上优化，地图的中心点问题得到了完美解决，效果如下：

总结

回顾这次的解决过程，其实就是一次不断摸索的经验积累。起初遇到地图中心点偏移的问题时，真的有点懵，不知道咋回事。但经过多次尝试，终于找到了通过监听 tilesloaded 事件，来判断地图加载完成的方法，总算是解决了这个问题。下次再遇到类似的情况，就知道该怎么处理了，解决问题的效率肯定会高很多。整个过程虽然花了一些时间，但问题解决后的那种成就感，还是挺开心的。希望本篇文章可以帮助到你，欢迎在评论区与我交流。