vue项目集成百度高精地图

为了在Vue项目中支持加载百度高精度地图并展示经纬度数组绘制轨迹，你可以按照以下步骤进行操作：

1. 创建Vue项目并安装必要的依赖：

确保你已经安装了Node.js和Vue CLI。如果没有安装，可以在命令行中运行以下命令来安装Vue CLI：

```bash
npm install -g @vue/cli
```

然后使用Vue CLI创建一个新的Vue项目：

```bash
vue create my-baidu-map-project
```

2. 安装百度地图JavaScript API：

在 `public/index.html` 文件中添加如下代码，用于引入百度地图的JavaScript API，并指定使用高精度地图：

```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图AK&v=1.0&s=1"></script>
```

将 `你的百度地图AK` 替换为你自己的百度地图应用密钥（AK）。

3. 创建一个Vue组件用于加载和显示百度高精度地图以及绘制轨迹：

在 `src/components` 目录下创建一个新的组件文件，例如 `BaiduMap.vue`，并在其中编写加载百度高精度地图和绘制轨迹的代码。

```vue
<template>
  <div id="baiduMap" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.map = new BMap.Map("baiduMap", { mapType: BMAP_HYBRID_MAP }); // 使用高精度地图（卫星图）作为底图
    const points = [ [116.404, 39.915], [116.504, 39.915], [116.604, 39.915] ]; // 示例经纬度数组

    for (let i = 0; i < points.length; i++) {
      const point = new BMap.Point(points[i][0], points[i][1]);
      if (i === 0) {
        this.map.centerAndZoom(point, 15);
      }
      this.map.addOverlay(new BMap.Marker(point));
      if (i > 0) {
        const line = new BMap.Polyline([new BMap.Point(points[i - 1][0], points[i - 1][1]), point], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});
        this.map.addOverlay(line);
      }
    }
  }
};
</script>

<style scoped>
#baiduMap {
  height: 100%;
}
</style>
```

4. 在需要显示地图的页面中引入 `BaiduMap` 组件，并在模板中使用它：

```vue
<template>
  <div>
    <h1>My Baidu Map Project</h1>
    <baidu-map></baidu-map>
  </div>
</template>

<script>
import BaiduMap from "@/components/BaiduMap.vue";

export default {
  components: {
    BaiduMap
  }
};
</script>
```

5. 运行项目并查看效果：

在命令行中运行以下命令启动项目：

```bash
npm run serve
```

访问 `http://localhost:8080`（或者是项目启动后显示的地址）查看项目，确认百度高精度地图是否成功加载，并且经纬度数组绘制的轨迹是否显示在地图上。

通过这些步骤，你就可以在Vue项目中成功加载百度高精度地图并展示经纬度数组绘制轨迹了。

支持设置中心点和滚轮缩放：

<template>
  <div id="baiduMap" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.map = new BMap.Map("baiduMap", { mapType: BMAP_HYBRID_MAP }); // 使用卫星图作为底图
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 设置中心点和缩放级别
    this.map.enableScrollWheelZoom(true); // 启用滚轮缩放功能
  }
};
</script>

<style scoped>
#baiduMap {
  height: 100%;
}
</style>