前端框架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 中。

你可能感兴趣的:(百度地图)