vue中使用百度地图测量工具无法二次使用的问题修复

问题

当我在vue框架中的弹窗中使用百度地图预览，并且使用到了百度地图测量工具类，出现这样一个问题，就是第一次打开弹窗时是可以正常测量的，关闭弹窗后再次打开，地图可以正常展示，但是测量工具无法使用。

就是点击后无反应，即使我打印了测量工具对象，也是有值的，使用过各种方法，均无成效。粗略考虑是因为加载的工具类js因为是全局公用类的原因，关闭弹窗后但是工具类绑定的还是原来的那张地图。

解决方法

所以这里需要将全局引用换成局部引用，我是放在了调用测量方法中：

// 开始测距
const startMeasureDistance = async () => {
  try {
    const BMapLib = await loadBMapLib();
    if (!distanceTool.value) {
      distanceTool.value = new BMapLib.DistanceTool(map.value);
    }
    distanceTool.value.open(); // 开启测距工具
  } catch (error) {
    console.error("创建测量工具对象失败:", error);
  }
};

// 每次重新加载测距类，因为如果不重新加载，会导致弹窗重新打开后测距无法是用
const loadBMapLib = () => {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = "https://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js";
    script.onload = () => {
      resolve(window.BMapLib);
    };
    script.onerror = () => {
      reject(new Error("加载测量工具类失败"));
    };
    document.head.appendChild(script);
  });
};

实测这样每次都可以正常使用测量工具