【Vue】vue项目中使用百度地图教程

在Vue项目中使用百度地图，首先需要引入百度地图的JavaScript API库。以下是一个简单的步骤和示例代码：

1. 在index.html或public/index.html中引入百度地图API库：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图API密钥"></script>

将你的百度地图API密钥替换为你从百度地图开放平台获取的API密钥。

2. 创建一个Vue组件，例如BaiduMap.vue：

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>
 
<script>
export default {
  name: 'BaiduMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      var map = new BMap.Map("map");
      // 创建点坐标
      var point = new BMap.Point(116.404, 39.915);
      // 初始化地图，设置中心点坐标和地图级别
      map.centerAndZoom(point, 15);
    }
  }
};
</script>
 
<style>
/* 样式按需添加 */
</style>

3. 在父组件中引用BaiduMap.vue：

<template>
  <div>
    <baidu-map></baidu-map>
  </div>
</template>
 
<script>
import BaiduMap from './BaiduMap.vue';
 
export default {
  components: {
    BaiduMap
  }
};
</script>

确保你已经在百度地图开放平台注册并获取了API Key。以上代码创建了一个基本的地图实例，你可以根据需要添加更多的地图功能，例如标记点、缩放、拖拽等。