离线百度地图在vue中的使用

在线百度地图

在使用离线百度地图之前，我们可以先了解一下在线百度地图是如何进行调用的。

百度地图官网

进入百度地图官网，点击进入地图开放平台

进入后选择开发文档，点击javaScriptAPI,

点击开发指南，在下方会介绍如何使用百度地图接口

在使用百度地图之前，要先申请密钥，申请密钥的步骤为
1.注册登录百度账号
2.申请成为百度开发者
3.获取服务密钥

我们从第一步开始，登录注册，这个很简单，不再介绍。
第二步，申请成为开发者，这个是需要身份认证的，由于我之前认证过，所以大家要自己探索一下，在哪里认证
第三步申请密钥：按照图片上的步骤进行点击即可

点击创建应用，出现如下界面

应用名称我们可以随便取，例如‘测试’
应用类型选择：浏览器端
启用服务不用修改，默认即可
白名单中输入：*
具体如下图所示

提交成功后，跳转页面显示申请的密钥信息

到这里，密钥就申请成功了
下面我们使用一下
点击示例DEMO

全选复制3中的内容

打开vscode(可以是其他的编辑器)，新建文件，将复制的内容全部粘贴，但是我们要修改两个地方，下图中圈出的内容

圈出内容如下

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

要在//前加htttps:
把“您的密钥”替换成之前申请的密钥
例如：

<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=6EQHEsYK7G47oyIWWy2jSlN4dFnKCdXN"></script>

接下来运行html文件即可，到这里在线百度地图的使用就介绍完成了

离线百度地图

在线百度地图我们主要依赖的就是script标签中的内容，它是百度地图的一个API接口，我们要做离线的百度地图，除了要下载瓦片地图之外更重要的就是API文件的下载和修改

本人是参考了许多博客和文档，最终成功的，在这里附上链接，供大家参考 离线百度地图1
离线百度地图2
。
第二个链接写的很好，很详细，一步一步来就会成功，在这里就不详细介绍了，有问题的话可以讨论哦。