一、环境介绍
框架：vue
地图来源：百度地图API
管理工具：vue-cli
二、从引入开始
目前百度地图支持两种引入方式：
1.直接引入
参考这篇文章，我是这样引入的
① 在项目文件夹下添加名为 vue.config.js 的文件；
② 在 vue.config.js 中写入：
module.exports = { configureWebpack: { externals: { "BMap": "BMap" } }, css: { loaderOptions: { stylus: { 'resolve url': true, 'import': [ './src/theme' ] } } }, pluginOptions: { 'cube-ui': { postCompile: true, theme: true } }}
③ 在 index.html 里引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=这里是你的密匙"></script>
④ 在 app.vue 内引入后即可使用
import Bmap from 'BMap'
2.使用官方vue组件
官方组件网址：Vue Baidu Map
使用时正常引入使用即可，因为个人使用官方的vue组件时，说明文档和功能较不完善，因此个人推荐使用第一种引入方式，可以直接参考官方js文档。
三、组件初始化
初始化的代码在官方文档里面都有了，就不详细说了，有一点需要注意：使用vue时，地图的初始化要放在 mounted 内，即
mounted () { this.createMap() }
否则，地图的初始化可能会出现问题。
四、展示地图
如果你的地图引入没有报错，也确定初始化成功了，那么很有可能你忘了设置地图 div 的高度，注意，创建地图的 div 一定要设置大小，否则无法显示！
五、地图的定位问题
1.web常见的定位方式
2.定位服务启动时间
百度地图和大部分的地图api提供的地位方式，都是几种定位方式和在一起的，也就是同时运用 ip、GPS 等方式综合定位，而浏览器启动 GPS 服务需要一定时间，因此，网页刚打开时定位飘地很远，不要慌！
3.Chrome内核注意！
此外，chrome内核的浏览器不知道从什么时候开始，只支持 ipv6协议的条件下，开启精确定位，也就是gps定位，因此，如果用chrome的定位飘地很远，这可能是因为只有ip定位的原因，不妨换edge(非chrome内核版的)试试。
六、参考资料
①百度地图官方文档，示例demo能解决很多问题！JavaScript API | 百度地图API SDK
②百度地图官方VUE组件说明，示例里面好像有矛盾的地方,使用的时候要注意！Vue Baidu Map
③大佬的文章！vue.js下引入百度地图jsApi的两种方法 - 个人文章 - SegmentFault 思否
④也是大佬的文章，关于定位问题，我只介绍了最简单的内容。前端开发中的地理定位问题小总结 | 野草园
七、总结
这是我第一次写文章啦，内容很多是参考网上各位大佬的文章，再自己尝试，然后再总结出来的。也是我在做一个需要地图的项目踩到的坑。有什么问题还望各位见谅哇，欢迎各位指出问题，给点建议 ！
