1.申请自己的Ak(密钥)

百度地图开发平台

登录后到控制台，然后创建应用，选择对应的配置

创建成功后复制对应的AK就行（注意：创建过程中需要注意应用类型）

2. 创建一个map.js

里面写此代码需要抛出

注意：这里的密钥改为刚才在百度地图开发平台上复制的AK（在使用过程中传过来使用）

export function MP(ak) {return new Promise(function (resolve, reject) {window.onload = function () {resolve(window.BMap)//插入script标签后 会在window上挂一BMap属性,此为跨域获取的数据};var script = document.createElement("script");script.type = "text/javascript";script.src = "http://api./api?v=2.0&ak=" + ak + "&callback=init";script.onerror = reject;document.head.appendChild(script);//插入此标签后 会在window上挂一BMap属性,此为跨域获取的数据})}

3.在页面中使用

3.1 引入map.js文件

// 引入封装的map.js文件import {MP} from '../map.js';

3.2 创建获取方法

methods:{getCity() {this.$nextTick(()=>{MP(this.ak).then(BMap=> {//在此调用apivar geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(a=>{//可以获取不同级别的位置信息，这里使用城市作为实例this.city = a.address.city;})})})}}

接下来我把完整版的有页面中使用代码放出来以供参考（记着将data中的Ak（密钥）换成自己账号下创建的项目中的密钥）

<template><h1>{{city}}</h1></template><script>// 引入封装的map.js文件import {MP} from '../map.js';export default {name:"LogoBox",data(){return {ak:'密钥密钥密钥（重要的事情说三遍）',//秘钥city:'正在定位'}},created() {this.getCity()},methods:{getCity() {this.$nextTick(()=>{MP(this.ak).then(BMap=> {//在此调用apivar geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(a=>{this.city = a.address.city;})})})}}}</script><style></style>