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.map.baidu.com/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=> {
//在此调用api
var 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=> {
//在此调用api
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(a=>{
this.city = a.address.city;
})
})
})
}
}
}
</script>
<style>
</style>