Ⅰ登录百度地图开放平台
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