vue-baidu-map基本使用

vue-baidu-map 是一个基于 Vue.js 的百度地图组件库，它封装了百度地图的 JavaScript API，使得在 Vue 项目中使用百度地图功能更加便捷。下面是如何在 Vue 项目中安装和使用 vue-baidu-map 的步骤：

安装

首先确保你的项目已经集成了 Vue 和 Vuex（因为 vue-baidu-map 使用了 Vuex 状态管理）。然后在项目根目录下运行以下命令来安装 vue-baidu-map：

npm install vue-baidu-map --save
# 或者使用 yarn
yarn add vue-baidu-map

配置

在你的 main.js 文件中引入并配置 vue-baidu-map：

import Vue from 'vue';
import VueBaiduMap from 'vue-baidu-map';

Vue.use(VueBaiduMap, {
  ak: 'YOUR_BAIDU_MAP_API_KEY' // 这里替换为你自己的百度地图 API key
});

确保你已经在百度开放平台注册并获取了合法的 AK（Access Key）。

使用组件

你可以在任何 Vue 组件中使用 baidu-map 组件：

<template>
  <div>
    <baidu-map class="map" :center="center" :zoom="15">
      <baidu-marker :position="center" animation="BMAP_ANIMATION_BOUNCE"></baidu-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 }
    };
  }
};
</script>

<style>
.map {
  width: 800px;
  height: 600px;
}
</style>

在这个例子中，我们创建了一个地图并设置了一个中心点和缩放等级。此外，我们添加了一个随地图一起弹跳的标记。