Ⅰ登录百度地图开放平台

jspopularGL | 百度地图API SDK ()

按照流程，申请成为开发者

ⅡAK秘钥申请

在控制台点击应用管理-我的应用，创建应用时注意应用类型选择浏览器端，白名单选*

Ⅲ安装依赖

npm i --save vue-baidu-map

在vue文件下终端输入上述内容安装依赖

Ⅳ全局引入

在入口文件main,js中引入

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { ak: '你申请的key' })

在你需要引入百度地图的.vue文件中

<template><div id="index"><baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" /></div></template><script>export default {name: 'Index',components: {},data() {return {center: { lng: 0, lat: 0 },zoom: 0}},created() {},mounted() {},methods: {handler({ BMap, map }) {console.log(BMap, map)this.center.lng = 126.628654this.center.lat = 45.729319this.zoom = 15}}}</script><style lang="less" scoped>.map{width: 500px;height: 500px;}</style>

Ⅴ更改坐标位置

拾取坐标系统 ()

官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/index