谷歌地图是一款广泛使用的网页地图服务，为前端开发者提供了丰富的 API 接口。其中，通过 JavaScript API V3 可以轻松地在网页中嵌入 Google 地图，并实现各种功能。本文将介绍如何在谷歌地图上添加多个标记点。
准备工作
在进行下一步之前，需要先获取谷歌地图 API Key。如果没有，可以在 Google Cloud Console 中创建一个项目并启用谷歌地图 JavaScript API。然后，在“凭据”页面中创建一个 API 密钥即可。具体操作可以参考 官方文档 。
添加地图
首先，我们需要在 HTML 页面中添加地图容器和引用 Google Maps API 的脚本：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------
-------
---- -
------- ------
-
--------
-------
------
---- ---------------
------- ------------------------------------------------------------------------
-------
-------上面的代码中，#map 是地图的容器，YOUR_API_KEY 需要替换成你自己的 API Key。
接着，我们需要在 JavaScript 中创建地图对象，并将其显示在 HTML 页面中。代码如下：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.9042, lng: 116.4074}, // 北京市的经纬度
zoom: 10 // 缩放级别
});
}这里，我们创建了一个名为 map 的地图对象，并设置了地图的中心点和缩放级别。在上面的代码中，我们将地图的中心点设置为北京市的经纬度，缩放级别为 10。
最后，我们需要在 HTML 页面中调用上面的 initMap 函数来显示地图：
<body onload="initMap()">
运行以上代码，就可以在网页中看到一个谷歌地图了。
添加标记
接下来，我们需要在地图上添加多个标记点。代码如下：
-- -------------------- ---- -------
-------- --------- -
--- --- - --- ----------------------------------------------- -
------- ----- -------- ---- ----------
----- --
---
-- -------
--- ------- - -
---------- ----- -------- ---- ---------- ------ -------
---------- ----- -------- ---- ---------- ------ -------
---------- ----- -------- ---- ---------- ------ ---------
--
-- ------------
-------------------------------- -
--- --------------------
--------- ----------------
---- ----
------ ------------
---
---
-上面的代码中，我们首先创建了一个名为 markers 的数组，用于存储多个标记点的位置和标题。然后，我们使用 forEach 方法遍历该数组，并针对每个标记点创建一个 google.maps.Marker 实例，并将其添加到地图上。
在上面的代码中，我们为每个标记点指定了经纬度和标题。关于 google.maps.Marker 类的更多信息可以参考 官方文档 。
总结
本文介
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8095