使用Pinia时Google Map Polyline无法删除的问题排查咨询

核心排查方向 #

1. 绕开watch逻辑，直接执行删除操作
   你当前依赖Pinia的watch监听googlePolyline变化来删除线，但可能watch未正常触发。先修改clearPolyline方法，直接调用Polyline的原生删除方法：

   const clearPolyline = () => {
       if (googlePolyline.value) {
           // 直接从地图移除Polyline
           googlePolyline.value.setMap(null);
           // 再清空引用
           googlePolyline.value = null;
       }
   }
   

   测试这个修改，如果能删掉线，说明问题出在watch逻辑上；如果还是不行，继续往下排查。

2. 检查是否存在未被跟踪的多条Polyline
   你当前只存储了最后一条Polyline的引用，若多次调用plotHistory，之前的Polyline实例会丢失引用，导致无法删除。可以：

   • 在plotHistory中加日志，每次创建时打印实例，确认是否重复创建：

     const plotHistory = (locations, currentPosition, pathId = null ) => {
         locations = locations.map((position) => {
             return { lat: position.latitude, lng: position.longitude }
         })
         const newPolyline = new google.maps.Polyline({
           path: locations,
           strokeColor: "#FF0000",
           strokeOpacity: 1.0,
           strokeWeight: 2,
         });
         console.log("创建新Polyline实例:", newPolyline);
         googlePolyline.value = newPolyline;
     }
     

   • 改用数组跟踪所有Polyline，确保能批量删除：

     // 在store中新增数组存储所有Polyline实例
     const polylines = ref([]);
     
     const plotHistory = (locations, currentPosition, pathId = null ) => {
         // 创建前先清除旧线
         clearPolyline();
         locations = locations.map((position) => {
             return { lat: position.latitude, lng: position.longitude }
         })
         const newPolyline = new google.maps.Polyline({
           path: locations,
           strokeColor: "#FF0000",
           strokeOpacity: 1.0,
           strokeWeight: 2,
         });
         newPolyline.setMap(googleMap.value);
         polylines.value.push(newPolyline);
     }
     
     const clearPolyline = () => {
         // 遍历所有Polyline从地图移除
         polylines.value.forEach(poly => poly.setMap(null));
         // 清空数组和单个引用
         polylines.value = [];
         googlePolyline.value = null;
     }
     

3. 验证watch是否正常触发
   你当前的watch写法冗余，改成监听单个ref的形式，同时加日志确认触发时机：

   // 替换原watch逻辑
   watch(googlePolyline, (newPolyline, oldPolyline) => {
     console.log("watch触发：旧Polyline", oldPolyline, "新Polyline", newPolyline);
     if(oldPolyline){
         oldPolyline.setMap(null)
     }
     if(newPolyline && googleMap.value){
         // 确保地图实例存在再添加
         newPolyline.setMap(googleMap.value)
     }
   })
   

   调用clearPolyline后查看日志，如果watch未触发，说明googlePolyline的变化未被正确监听；如果触发但oldPolyline为null，说明之前的Polyline引用已丢失。

关键注意点 #

• 操作Google Map的Overlay（如Polyline）时，优先直接调用实例方法，不要过度依赖状态管理的watch，避免异步或时机问题。
• 始终维护Overlay实例的引用，不要随意覆盖，否则会出现"幽灵"Overlay留在地图上。

内容的提问来源于stack exchange，提问作者iamafasha