Vue 调用百度地图 API，区级覆盖物鼠标交互，信息盒子显示及关闭按钮隐藏

1. 引入百度地图 API

在需要使用百度地图的 Vue 组件中，需要首先引入百度地图 API。以下是在 index.html 中引入百度地图 API 的示例：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>

其中，YOUR_API_KEY 是您的百度地图 API 密钥。

2. 初始化百度地图

在 Vue 组件中，可以使用 mounted() 生命周期钩子来初始化百度地图。在 mounted() 钩子中，可以创建一个百度地图实例，并将其赋给 this.map 属性。以下是在 Vue 组件中初始化百度地图的示例：

export default {
  mounted() {
    this.map = new BMap.Map("map-container");
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  },
};

3. 添加区级覆盖物

要在地图上添加区级覆盖物，可以使用 addOverlay() 方法。以下是在 Vue 组件中添加区级覆盖物的示例：

export default {
  mounted() {
    this.map = new BMap.Map("map-container");
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    // 获取区级边界数据
    const districtBoundaries = require("./district-boundaries.json");

    // 遍历区级边界数据
    districtBoundaries.features.forEach((feature) => {
      // 创建区级覆盖物
      const districtOverlay = new BMap.Polygon(feature.geometry, {
        strokeColor: "#ff0000",
        strokeWeight: 2,
        fillOpacity: 0.5,
        fillColor: "#ff0000",
      });

      // 添加区级覆盖物到地图上
      this.map.addOverlay(districtOverlay);
    });
  },
};

4. 鼠标移动上去变换样式

要实现鼠标移动到区级覆盖物上时变换样式，可以使用 addEventListener() 方法。以下是在 Vue 组件中实现鼠标移动上去变换样式的示例：

export default {
  mounted() {
    this.map = new BMap.Map("map-container");
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    // 获取区级边界数据
    const districtBoundaries = require("./district-boundaries.json");

    // 遍历区级边界数据
    districtBoundaries.features.forEach((feature) => {
      // 创建区级覆盖物
      const districtOverlay = new BMap.Polygon(feature.geometry, {
        strokeColor: "#ff0000",
        strokeWeight: 2,
        fillOpacity: 0.5,
        fillColor: "#ff0000",
      });

      // 鼠标移动到区级覆盖物上时变换样式
      districtOverlay.addEventListener("mouseover", () => {
        districtOverlay.setStrokeColor("#00ff00");
        districtOverlay.setFillColor("#00ff00");
      });

      // 鼠标移出区级覆盖物时恢复样式
      districtOverlay.addEventListener("mouseout", () => {
        districtOverlay.setStrokeColor("#ff0000");
        districtOverlay.setFillColor("#ff0000");
      });

      // 添加区级覆盖物到地图上
      this.map.addOverlay(districtOverlay);
    });
  },
};

5. 显示信息盒子

要在地图上显示信息盒子，可以使用 openInfoWindow() 方法。以下是在 Vue 组件中显示信息盒子的示例：

export default {
  mounted() {
    this.map = new BMap.Map("map-container");
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    // 获取区级边界数据
    const districtBoundaries = require("./district-boundaries.json");

    // 遍历区级边界数据
    districtBoundaries.features.forEach((feature) => {
      // 创建区级覆盖物
      const districtOverlay = new BMap.Polygon(feature.geometry, {
        strokeColor: "#ff0000",
        strokeWeight: 2,
        fillOpacity: 0.5,
        fillColor: "#ff0000",
      });

      // 鼠标移动到区级覆盖物上时显示信息盒子
      districtOverlay.addEventListener("mouseover", () => {
        districtOverlay.setStrokeColor("#00ff00");
        districtOverlay.setFillColor("#00ff00");

        // 创建信息盒子
        const infoWindow = new BMap.InfoWindow(`<div><h3>${feature.properties.name}</h3><p>${feature.properties.description}</p></div>`);

        // 打开信息盒子
        this.map.openInfoWindow(infoWindow, districtOverlay.getPosition());
      });

      // 鼠标移出区级覆盖物时关闭信息盒子
      districtOverlay.addEventListener("mouseout", () => {
        districtOverlay.setStrokeColor("#ff0000");
        districtOverlay.setFillColor("#ff0000");

        // 关闭信息盒子
        this.map.closeInfoWindow();
      });

      // 添加区级覆盖物到地图上
      this.map.addOverlay(districtOverlay);
    });
  },
};

6. 隐藏信息盒子的关闭按钮

要隐藏信息盒子的关闭按钮，可以使用 hideCloseButton() 方法。以下是在 Vue 组件中隐藏信息盒子的关闭按钮的示例：

export default {
  mounted() {
    this.map = new BMap.Map("map-container");
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    // 获取区级边界数据
    const districtBoundaries = require("./district-boundaries.json");

    // 遍历区级边界数据
    districtBoundaries.features.forEach((feature) => {
      // 创建区级覆盖物
      const districtOverlay = new BMap.Polygon(feature.geometry, {
        strokeColor: "#ff0000",
        strokeWeight: 2,
        fillOpacity: 0.5,
        fillColor: "#ff0000",
      });

      // 鼠标移动到区级覆盖物上时显示信息盒子
      districtOverlay.addEventListener("mouseover", () => {
        districtOverlay.setStrokeColor("#00ff00");
        districtOverlay.setFillColor("#00ff00");

        // 创建信息盒子
        const infoWindow = new BMap.InfoWindow(`<div><h3>${feature.properties.name}</h3><p>${feature.properties.description}</p></div>`);

        // 隐藏信息盒子的关闭按钮
        infoWindow.hideCloseButton();

        // 打开信息盒子
        this.map.openInfoWindow(infoWindow, districtOverlay.getPosition());
      });

      // 鼠标移出区级覆盖物时关闭信息盒子
      districtOverlay.addEventListener("mouseout", () => {
        districtOverlay.setStrokeColor("#ff0000");
        districtOverlay.setFillColor("#ff0000");

        // 关闭信息盒子
        this.map.closeInfoWindow();
      });

      // 添加区级覆盖物到地图上
      this.map.addOverlay(districtOverlay);
    });
  },
};

7. 完整示例

以下是一个完整的示例，展示了如何使用 Vue.js 调用百度地图 API，添加区级覆盖物，并实现鼠标移动上去时变换样式、显示信息盒子，以及隐藏信息盒子的关闭按钮的功能：

export default {
  mounted() {
    this.map = new BMap.Map("map-container");
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    // 获取区级边界数据
    const districtBoundaries = require("./district-boundaries.json");

    // 遍历区级边界数据
    districtBoundaries