在使用 Google Maps API V3 开发 Web 应用程序时，经常需要在地图上展示多个标记点或区域。为了确保这些标记点或区域都能完全显示在地图中，我们通常会使用 fitBounds() 方法来自适应调整地图视野。
但是，在实际开发过程中，你可能会遇到 fitBounds() 方法无法正确调整地图边界的情况。例如，当你想要在地图上显示一组经纬度范围很广的标记点时，fitBounds() 方法可能只会显示其中的一部分标记点。
问题原因
造成 fitBounds() 方法无法正确调整地图边界的原因主要有两种：
- 目标区域的经纬度范围太大，超出了地图可显示的范围；
- 地图容器的尺寸不足以完全显示目标区域。
对于第一种情况，我们可以通过调整目标区域的经纬度范围来缩小它的范围；对于第二种情况，我们可以通过调整地图容器的尺寸来扩大它的显示范围。
解决方法
方案一：调整目标区域的经纬度范围
我们可以通过遍历目标区域的所有标记点或区域，计算出它们的最大经纬度和最小经纬度，然后将这些值作为参数传递给 fitBounds() 方法。
示例代码：
-- -------------------- ---- -------
-- --------------------
--- ------ - ----
--- ------ - -----
--- ------ - ---
--- ------ - ----
--- ---- - - -- - - --------------- ---- -
--- -------- - -------------------------
------ - ---------------- ----------------
------ - ---------------- ----------------
------ - ---------------- ----------------
------ - ---------------- ----------------
-
-- ------
--- ------ - --- ---------------------------- -------------------------- -------- --- -------------------------- ---------
----------------------方案二：调整地图容器的尺寸
我们可以通过调整地图容器的 CSS 样式来扩大它的显示范围。例如，增加地图容器的高度和宽度，或者将它的位置移动到更合适的位置。
示例代码：
<div id="map-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></div>
// 调整地图容器的尺寸
var container = document.getElementById('map-container');
container.style.height = window.innerHeight + 'px';
container.style.width = window.innerWidth + 'px';
// 调整地图边界
map.fitBounds(bounds);总结
在使用 Google Maps API V3 开发 Web 应用程序时，fitBounds() 方法是一个非常有用的方法。但是，当它无法正确调整地图边界时，我们需要考虑目标区域的经纬度范围和地图容器的尺寸，并采取相应的解决方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28487