前端框架Vue（6）——如何在 vue 中内嵌百度地图

  百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

  该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口无使用次数限制。

  地址传送门：http://lbsyun.baidu.com/index...

  文章说是栏目是前端框架Vue结合百度地图，这边还是主讲一下如何引入地图，以及部分 API 的使用。

1、申请密钥

百度地图的使用需要一个专属的密钥（ak）作为路径：

按步骤完成，并且激活就能获得一个密钥了，这样我们就可以开始引入地图了。

先来看效果图：

整体项目是用Vue做的，百度地图是其中的一个功能模块，这边了解一下如何将地图引入到Vue项目中：

1、首先我用的是vue-cli脚手架,这是目录结构：

现在在 index.html 中引入script:

script src='http://api.map.baidu.com/api?v=2.0&ak=你的密钥&callback=init'>

解释一下：v = 2.0是版本，ak 则是申请到的密钥，callback 回调初始化地图。

2、给定容器，调用 API 绘图

上面的代码是可以直接用的，也完全可以对照着百度地图给出的文档进行实践。

将所有的操作放到 mounted 中，保证挂载完成后再去初始化地图。

这篇文章主要是为了日后自己用到地图可以直接来查，实在想不出其他写的目的了。
总结一下：

1、vue 结合百度地图如何引入。
2、操作暂时写在 mounted 中。
3、需要申请一个密钥，并在使用时引入 script 中。