在前端开发中，经常需要使用地图来展示位置信息。但是当我们在地图上标注多个点时，往往需要将地图缩放并调整中心点，以便所有标记都能够在地图上完全可见。这篇文章将介绍如何使用 JavaScript 和 Google Maps API 来实现中心/缩放地图覆盖所有可见标记的功能。
地图基础知识
在开始之前，让我们先了解一些地图基础知识：
- Lat（纬度）： 表示一个点在地球球面上北半球或南半球的位置。取值范围为 -90 到 90 度。
- Lng（经度）： 表示一个点在地球球面上东半球或西半球的位置。取值范围为 -180 到 180 度。
- Zoom（缩放级别）： 表示地图上显示的比例尺。取值范围为 0 到 21，数值越大地图显示的区域越小。
计算地图的中心点和缩放级别
要将地图调整为包含所有标记的视窗，我们需要计算出地图的中心点和缩放级别。下面是计算中心点和缩放级别的方法：
-------- ------------------------- -
--- ------ - --- ---------------------------
-- --------------------
--- ---- - - -- - - --------------- ---- -
----------------------------------------
-
-- -------------
--- ------ - -------------------
--- ---- - ----------------
------ -------- ------- ----- ------
-
-- ------
-------- --------------- -
--- -------- - ---
--- -------- - --
--- ------ - -------------------------------
--- -------- - -------------------
--- --------- - --------------------
--- -- - ---------------------- -- --------- ------
--- -- - ---------------------- -- --------- ------
--- ------- - ----------------- - ----------
--- ------- - ----------------- - ----------
--- ----- - ----------------- - -------- - ----- - ---------
--- ----- - ------------------ - -------- - ----- - ---------
--- ---- - ----------------------------------- -------- ----------
---- - -------------- ----------
------ -----
-上面的代码中，getCenterAndZoom 函数接收一个包含所有标记的数组 markers，并返回一个对象，该对象包含了地图的中心点 center 和缩放级别 zoom。
首先，我们创建一个 LatLngBounds 对象，表示地图的范围。然后，循环遍历所有标记，并将它们加入到地图范围中。接下来，我们使用 getCenter 方法获取地图的中心点，并使用 getZoom 方法计算缩放级别。
在 getZoom 函数中，我们首先定义了地图的最大和最小缩放级别，然后获取地图容器的宽度和高度。接着，我们获取地图范围的东北角和西南角的位置信息，计算出纬度和经度的差值，以及当前地图容器的宽度和高度与每个像素所代表的经、纬度之间的比例关系。最后，根据经、纬度的比例关系以及地图容器的宽度和高度，计算出
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8783