Vue引用百度地图API

一. 通过官网申请ak

1. 打开百度地图官网，在开发文档中找到JavaScript API

👉百度地图官网

2.点击账号和获取密钥

（需要通过实名认证）

3.按照页面步骤操作即可

二. 通过模块化引入

1. 安装

在终端输入：

npm i vue-baidu-map --save

2. 初始化

在main.js中导入

import BaiduMap from 'vue-baidu-map';// 导入地图

// 进行全局注册，一次性引入百度地图组件库的所有组件
// ak为官方提供的密钥
Vue.use(BaiduMap, {
  ak: '你申请的ak'
})

在public/index.html中引入

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

3.在Map.vue页面中使用

<template>
  <div class="component">
    <el-card class="cardStyle">
      <!-- ready,地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例 -->
      <baidu-map
        id="map"
        class="mapStyle"
        :center="centerPoint"
        :zoom="15"
        :scroll-wheel-zoom="true"
        @ready="handler"
        @click="getPoint"
      >
        <bm-marker
          v-for="marker in markerArr"
          :key="marker.id"
          :position="marker"
          animation="BMAP_ANIMATION_BOUNCE"
        />
      </baidu-map>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //中心轴坐标
      centerPoint: {
        lng: 0,
        lat: 0,
      },
      markerArr: [
        {
          id: 0,
          lng: 114.412599,
          lat: 23.079404,
        },
      ],
      markerPoint: {},
    };
  },
  methods: {
    // 完成一次组件卸载 / 重新加载的方法，重新渲染
    handler() {
      this.centerPoint.lng = 114.412599;
      this.centerPoint.lat = 23.079404;
    },
    // 添加点击函数，点击后修改marker的经纬度
    getPoint(e) {
      // 点击获取point经纬度
      const { lng, lat } = e.point;

      // 获取一个随机不重复的字符串做为id
      let id = new Date().getTime() + parseInt(Math.random() * 10000);

      // 新增一个marker标记
      this.markerArr.push({
        id: id,
        lng: lng,
        lat: lat,
      });
    },
  },
};
</script>

<style scoped>
.mapStyle {
  width: 100%;
  height: calc(100vh - 130px);
}
.cardStyle {
  height: calc(100vh - 130px);
}
</style>

4.结果实现