Vue引用百度地图API
一. 通过官网申请ak1. 打开百度地图官网，在开发文档中找到JavaScript API2.点击账号和获取密钥3.按照页面步骤操作即可二. 通过模块化引入1. 安装2. 初始化3.在Map.vue页面中使用4.结果实现一. 通过官网申请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./api?v=2.0&ak=你的ak"></script>
3.在Map.vue页面中使用
<template><div class="component"><el-card class="cardStyle"><!-- ready,地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例 --><baidu-mapid="map"class="mapStyle":center="centerPoint":zoom="15":scroll-wheel-zoom="true"@ready="handler"@click="getPoint"><bm-markerv-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;// 获取一个随机不重复的字符串做为idlet 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>
