谷歌地图API是前端常用的一个工具，可以在网站中嵌入地图，并添加自定义标记、信息窗口、路线规划等功能。本文将介绍如何使用谷歌地图API实现多标记等的功能。
前置知识
在学习本文之前，需要掌握HTML、CSS和JavaScript基础知识，并了解如何在网页中嵌入谷歌地图API。
多标记
当需要在地图上标注多个位置时，可以使用多标记功能。下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ---------------
------- ------------------------------------------------------------------------
--------
-------- --------- -
--- --- - --- ----------------------------------------------- -
----- ---
------- ----- -------- ---- ----------
---
--- ------- - -
----- ----------- -------- -----------
---------- ------ -------- -----------
------ ------ -------- ----------
--
--- ---- - - -- - - --------------- ---- -
--- ------ - --- --------------------
--------- ----- -------------- ---- ---------------
---- ----
------ -------------
---
-
-
---------
-------
---- -
------- ------
------ -----
-
--------
-------
----- -------------------
---- ---------------
-------
-------上述代码中，markers数组包含了三个标记点的位置和标题。在for循环中，创建了一个新的google.maps.Marker对象，并将其添加到地图上。
自定义标记
当需要使用自定义图标作为标记时，可以使用谷歌地图API提供的icon属性。下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------ ------------
------- ------------------------------------------------------------------------
--------
-------- --------- -
--- --- - --- ----------------------------------------------- -
----- ---
------- ----- -------- ---- ----------
---
--- ------ - --- --------------------
--------- ----- -------- ---- -----------
---- ----
----- ------------------------------------------------------------------------------------------------
---
-
---------
-------
---- -
------- ------
------ -----
-
--------
-------
----- -------------------
---- ---------------
-------
-------上述代码中，icon属性被设置为一个自定义图标的URL地址。可以通过设置不同的URL地址来使用不同的自定义图标。
信息窗口
当需要在标记上显示额外的信息时，可以使用谷歌地图API提供的信息窗口功能。下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------- --------------
------- ------------------------------------------------------------------------
--------
-------- --------- -
--- --- - --- ----------------------------------------------- -
----- ---
------- ----- -------- ---- ----------
---
--- ------ - --- --------------------
--------- ----- -------- ---- -----------
---- ----
------ ---- ----------
---
--- ------------- - ----- -------------- -
---- -----------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------