一、环境介绍

框架：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 思否

④也是大佬的文章，关于定位问题，我只介绍了最简单的内容。前端开发中的地理定位问题小总结 | 野草园

七、总结

这是我第一次写文章啦，内容很多是参考网上各位大佬的文章，再自己尝试，然后再总结出来的。也是我在做一个需要地图的项目踩到的坑。有什么问题还望各位见谅哇，欢迎各位指出问题，给点建议！

前端WEB地图使用详细介绍