谷歌地图 API （Application Programming Interface）是一种用于在网站或应用程序中嵌入地图的方式。本文将介绍如何使用谷歌地图 API V3 来定位地图的中心，并放大以显示标记。
地图的基础
在开始之前，需要确保您已经创建了一个 Google Cloud Platform（GCP）项目并启用了 Google Maps JavaScript API。如果您还没有，请按照这篇文章中的步骤操作。
接下来，我们需要在 HTML 文件中添加地图的容器：
<div id="map"></div>
然后，在 JavaScript 文件中，我们可以使用以下代码初始化地图：
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13,
});
}上面的代码将创建一个新的谷歌地图对象，并将其添加到 id 为 map 的 <div> 标签中。center 选项指定地图的初始中心点坐标，这里我们将其设置为悉尼的经纬度坐标。zoom 选项指定地图的初始缩放级别。
中心点的改变
有时候，我们需要动态地改变地图的中心点。这可以通过 setCenter() 方法来实现。
map.setCenter({ lat: -37.8136, lng: 144.9631 });上面的代码将地图的中心坐标设置为墨尔本的经纬度坐标。
放大显示标记
通常，我们会在地图上添加一些标记以表示地点或其他信息。当用户点击标记时，我们希望地图自动放大并将标记移动到屏幕中央。
这可以通过以下代码来实现：
-- -------------------- ---- ------- ----- ------ - --- -------------------- --------- - ---- --------- ---- -------- -- ---- ------ --------- --- --------------------------- -- -- - ---------------- ------------------------------------ ---
上面的代码将在地图上创建一个新的标记，然后为该标记添加一个监听器。当用户点击标记时，setZoom() 方法将地图缩放级别设置为 17，并将中心点设置为标记的位置。
除了放大和居中标记外，我们还可以使用 panTo() 方法将地图平滑地移动到标记的位置：
marker.addListener("click", () => {
map.panTo(marker.getPosition());
});总结
本文介绍了如何使用谷歌地图 API V3 来定位地图的中心并放大以显示标记。这些技术非常有用，可以为您的网站或应用程序增加更多功能和交互性。
完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---- --- ----------
------- -------------------------------------------------------------------------------
----- ---------------
-------
---- -
------- ------
------ -----
-
--------
-------
------
---- ---------------
--------
-------- --------- -
----- --- - --- ----------------------------------------------- -
------- - ---- --------- ---- -------- --
----- ---
---
----- ------ - --- --------------------
--------- - ---- --------- ---- -------- --
----
------ ---------
---
--------------------------- -- -- -
--------------------------------
---
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------