Ⅰ登录百度地图开放平台
jspopularGL | 百度地图API SDK (baidu.com)
按照流程，申请成为开发者
Ⅱ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.628654
this.center.lat = 45.729319
this.zoom = 15
}
}
}
</script>
<style lang="less" scoped>
.map{
width: 500px;
height: 500px;
}
</style>Ⅴ更改坐标位置
