Vue使用百度地图详细教程
先提供几个文档
Vue-Baidu-map文档：https://dafrok.github.io/vue-baidu-map/#/zh/index
百度地图JavaScript文档：https://lbsyun.baidu.com/index.php?title=jspopularGL
1、申请百度API密钥
控制台->应用管理->我的应用->创建应用
2、安装vue-baidu-map
$ npm install vue-baidu-map --save
3、main.js引入vue-baidu-map并注册
在main.js文件中添加以下内容：
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '第一步申请的密钥',
})
4、组件中使用
代码编写
<div>
<baidu-map class="map" :center="{lng: 119.570702, lat: 31.977633}" :zoom="1" :scroll-wheel-zoom="true">
</baidu-map>
</div>
实现效果
5、添加缩小放大按钮
实现效果
代码添加
<baidu-map class="map" :center="{lng: 119.570702, lat: 31.977633}" :zoom="1" :scroll-wheel-zoom="true">
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
更多自定义操作请看Vue-baidu-map文档
