vue安装百度地图依赖包，以及使用（模块化引入百度地图）

vue安装百度地图依赖包，以及使用（模块化引入百度地图）

百度地图已经基于Vue开发了对应的组件，我们可以通过引入百度地图依赖包，使用百度地图，步骤如下：
1.安装百度地图依赖包
npm install vue-baidu-map -s
可以安装到当前项目下，可以通过node_modules文件查看是否有vue-baidu-map文件
2.在src/main.js导入依赖包

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{
    ak:'百度地图秘钥'		//使用申请的百度地图秘钥
})

3.创建百度地图vue文件

通过上图我们可以发现，我们并没有配置地图的基本信息，所以地图不会显示，需要我们进一步去配置地图的中心，显示层级等信息

<template>
    <baidu-map class="map"
        :center="{lng:114.065537,lat:22.553321}"
        :zoom='13'
        :scroll-wheel-zoom='true'
    >
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
    <bm-marker :position="{lng:114.065537,lat:22.553321}" :dragging="true" animation='BMAP_ANIMATION_BOUNCE'>
        <bm-label content='深圳市市民之家' :labelStyle="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" />  
    </bm-marker>
  </baidu-map>
</template>
<script>
</script>
<style>
.map{
    height: 100%;
    width: 100%;
}    
</style>

通过上述三步骤，我们才可以实现地图的加载，结果如图所示：

学习资料：VUE:[https://github.com/Dafrok/vue…]
                  Vue Baidu Map：https://dafrok.github.io/vue-baidu-map/#/zh/overlay/marker

我们还可以通过传统的引入百度地图js文件方式，实现地图的加载，详细步骤请参考我的上一篇文章    vue中引入百度地图