Google 地图是一个非常受欢迎的 Web 应用程序，用于显示地理位置和交互式地图。在开发网页中使用 Google 地图时，我们通常需要将多个标记添加到地图上来展示具体位置。然而，如果标记过多，可能导致它们被挤压在一起或者不易于查看。为了解决这个问题，我们可以通过自动调整缩放级别来确保所有标记都能够在屏幕上得到良好的展示效果。
问题背景
首先，让我们考虑一个简单的示例场景：我们需要在 Google 地图上标注一个城市内的所有公园。我们可以通过以下方式添加标记：
-------- ------------ -
--- ---------- - -
----- ---
------- --- ------------------------------ -------------
---------- -----------------------------
--
--- --- - --- ------------------------------------------------------
------------
-- ------
--- ----- - -
--------- ------ ----------- -------------
--------- ------ ----------- -------------
---------- ------ ------ ----------- -------------
---------- ------ ----------- ------------
--
--- ---- - - -- - - ------------- ---- -
--- ---- - ---------
--- ------ - --- --------------------
--------- ----- -------- ---- ---------
---- ----
------ -------
---
-
-
---------------------------------------- ------- ------------这段代码在标记上显示了四个公园。但是，因为它们的位置相对较远，如果直接使用默认的缩放级别，可能会导致它们看起来非常小，并且难以辨认。
解决方案
要解决这个问题，我们需要计算所有标记点的包围矩形并自动缩放地图以适应该矩形。一种简单的方法是遍历标记数组，并找到最左、最右、最上和最下的经纬度值。然后，我们可以将地图中心设置为该范围的中心，并调整缩放级别以确保所有标记都适合屏幕。
下面是一个示例实现：
-------- ------------ -
--- ---------- - -
----- ---
------- --- ------------------------------ -------------
---------- -----------------------------
--
--- --- - --- ------------------------------------------------------
------------
-- ------
--- ----- - -
--------- ------ ----------- -------------
--------- ------ ----------- -------------
---------- ------ ------ ----------- -------------
---------- ------ ----------- ------------
--
--- ------ - --- ---------------------------
--- ---- - - -- - - ------------- ---- -
--- ---- - ---------
--- ------ - --- --------------------
--------- ----- -------- ---- ---------
---- ----
------ -------
---
------------------------------------
-
-- ---------------
----------------------
-
---------------------------------------- ------- ------------在此示例中，我们使用 google.maps.LatLngBounds 类来计算标记的包围矩形。在
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27960