vue项目中百度地图的使用(超简单)

一、 前往百度地图开放平台获取ak。链接地址

二、安装vue-baidu-map。(这里推荐npm安装，我在使用cdn时一直导入不进来，可能是方法不对。还是npm简单明了)

       命令： npm install vue-baidu-map --save

三、引入vue-baidu-map.js(我这里是全局引入的) 在main.js中添加以下代码：

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
    // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
    ak: 'Your ak,请写入你的ak'
});

四、代码中使用

<baidu-map class="bm-view" :center="{lng: 121.4095, lat: 31.1796}" :zoom="15":scroll-wheel-zoom="true">
        <bm-marker :position="{lng: 121.4095, lat: 31.1796}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
</baidu-map>

最终效果图

更多详细功能可以去vue-baidu-map官网查看api，官网地址