在前端开发中,使用 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 的使用方法,在实际开发中能够更加灵活地应用该技术。
完整示例代码如下:
--------- ----- ------ ------ ------------- ----- ---- ------ ----------- ----- ---------------- ------ ---------------- ---- - ------- ------ - -------- ------- ------ ---- --------------- ------- ------------------------------------------------------------------------ ------- ----------------------- --- --- - --- ----------------------------------------------- - ------- ----- ---------- ---- ------------ ----- -- --- --- --------------- - - ----- ---------- ---- ------------ ----- -- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------