使用 Google Maps API 删除地图上的路线

在前端开发中,使用 Google Maps API 可以方便地在网页上显示地图,并添加标记、路线等功能。但是有时候需要删除已经添加的路线,这时候该怎么做呢?本文将介绍如何使用 Google Maps API 删除地图上的路线。

准备工作

首先需要在 HTML 文件中引入 Google Maps API 的 JavaScript 库,可以通过以下代码来实现:

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

其中 YOUR_API_KEY 需要替换成你自己的 API KEY。

接着需要创建一个地图容器,可以使用以下代码:

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

其中 id 属性为 map,样式设置了高度为 500 像素。

在 JavaScript 文件中,需要使用 google.maps.Map 类创建一个地图对象,并设置其中心点和缩放级别,示例如下:

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

这里创建了一个地图对象 map,中心点坐标为北京市中心,缩放级别为 13。

添加路线

接下来需要添加一条路线到地图中,示例代码如下:

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

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

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

这里创建了一条路径,包含四个坐标点。google.maps.Polyline 类用于创建折线对象,其中 path 属性设置为需要连接的坐标点数组,geodesic 属性表示是否使用大圆路径连接坐标点,strokeColor 属性设置线条颜色,strokeOpacity 属性设置线条透明度,strokeWeight 属性设置线条宽度。最后调用 setMap 方法将该路线添加到地图中。

删除路线

要删除已经添加到地图上的路线,可以使用 setMap(null) 方法将路线从地图上移除。示例代码如下:

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

这里使用 setMap(null) 方法将路线对象 path 从地图上移除。

总结

本文介绍了如何使用 Google Maps API 在网页上显示地图,并添加路线,同时也讲解了如何删除已经添加的路线。通过这篇文章,希望读者可以更好地掌握 Google Maps API 的使用方法,在实际开发中能够更加灵活地应用该技术。

完整示例代码如下:

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

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

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