谷歌地图 API V3 - 在同一地点的多个标记

阅读时长 5 分钟读完

在前端开发中,谷歌地图 API V3 是一个强大的工具,它可以帮助我们实现各种地图功能。在这篇文章中,我们将探讨如何在同一地点添加多个标记,并提供示例代码以供参考。

添加单个标记

首先,让我们看看如何在谷歌地图上添加单个标记。以下是一个基本示例代码:

-- -------------------- ---- -------
--------- -----
------
  ------
    ----------- --- -- - --------------
    ------- ------------------------------------------------------------------------
    --------
      -------- ------------ -
        --- ---------- - -
          ------- --- --------------------------- -----------
          ----- --
        --
        --- --- - --- ------------------------------------------------------ ------------
        --- ------ - --- --------------------
          --------- --- --------------------------- -----------
          ---- ----
          ------ ---- -----------
        ---
      -
      ---------------------------------------- ------- ------------
    ---------
  -------
  ------
    ---- --------------- ----------------------------
  -------
-------

在上面的代码中,我们首先使用 google.maps.Map 创建了一个新的地图,并指定了其中心点和缩放级别。然后,我们使用 google.maps.Marker 创建了一个新的标记,并指定其位置和标题,并将其添加到地图上。

添加多个标记

现在,让我们看看如何在同一地点添加多个标记。以下是一个示例代码:

-- -------------------- ---- -------
--------- -----
------
  ------
    ----------- --- -- - ------------------
    ------- ------------------------------------------------------------------------
    --------
      -------- ------------ -
        --- ---------- - -
          ------- --- --------------------------- -----------
          ----- --
        --
        --- --- - --- ------------------------------------------------------ ------------
        --- --------- - -
          - ---- -------- ---- ---------- ------ ---- ---------- --
          - ---- -------- ---- ---------- ------ ---- -------- --
          - ---- -------- ---- ---------- ------ ---- ------ --
        --
        --- ---- - - -- - - ----------------- ---- -
          --- ------ - --- --------------------
            --------- --- ------------------------------------ ------------------
            ---- ----
            ------ -------------------
          ---
        -
      -
      ---------------------------------------- ------- ------------
    ---------
  -------
  ------
    ---- --------------- ----------------------------
  -------
-------

在上面的代码中,我们首先创建了一个名为 locations 的数组,其中包含了三个地点的经纬度和标题信息。然后,我们使用 for 循环遍历该数组,并使用 google.maps.Marker 创建了一个新的标记,并将其添加到地图上。

总结

在这篇文章中,我们学习了如何在谷歌地图 API V3 上添加单个标记和多个标记。通过这些示例代码,我们可以更好地理解如何使用谷歌地图 API V3 来实现各种地图功能。希望这篇文章对您有所帮助!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/11080

纠错
反馈