vue项目中隐藏腾讯地图的多条路线_腾讯地图控制多个点显示隐藏-CSDN博客

本文链接：https://blog.csdn.net/qq_37088317/article/details/105606982

本文介绍了在Vue项目中如何隐藏腾讯地图的多条驾车路线。通过研究腾讯地图API，作者发现使用DrivingService的clear()方法无效，但通过遍历并设置Polyline的setVisible(false)，成功实现了路线的隐藏功能。详细步骤包括调用qq.maps.DrivingService.search显示路线和使用showPath及showLine函数控制路线的显隐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我有一个界面需要用到腾讯地图的DrivingService驾车路线规划功能。通过使用qq.maps.DrivingService，成功显示了3条路线。在这个界面上，我想点击按钮使路线隐藏。查阅DrivingService官方文档http://lbs.qq.com/javascript_v2/doc/drivingservice.html后，发现有一个函数clear()可以清空DrivingService在map和panel中的展现，然而我发现没什么卵用。。。
后来，我试着查阅了折线显示qq.maps.Polyline的官方文档http://lbs.qq.com/javascript_v2/doc/polyline.html，终于找到了方法哈哈哈。
界面效果如下，点击路线规划按钮会显示路线，点击调度次序按钮会隐藏路线：
在这里插入图片描述
总代码如下（用了MuseUI)：

<template>
<div>
  <div class="button-wrapper">
    <mu-button color="primary" @click="showPath">路线规划</mu-button>
    <mu-button color="primary" @click="showLine">调度次序</mu-button>
  </div>
  <div id="container"></div>
</div>
</template>

<script>
import TopHeader from './TopHeader'
export default {
   
  components: {
   
    TopHeader
  },
  data () {
   
    return {
   
      scheduleInfo: [],
      centerPoint: [23.0481387900, 113.3998918500],
      arrayList: [],
      map: {
   },
      center: {
   },
      driving: {
   },
      routeLines: []
    }
  },
  created () {
   
    this.scheduleIn