Vue3内网使用百度离线地图

在内网开发的小伙伴如果需要使用地图功能肯定都会碰到这个问题。连接不到外网，加载不出来地图资源。这个时候比较好的解决办法就是使用离线地图了。

离线地图需要解决两个地方：

        第一是地图的展示问题

        第二是地图api的调用问题

下面我们直奔主题，来实现一波离线地图

首先我们使用一个vue-baidu-map-3x地图插件，它支持离线地图，可以更方便的集成离线地图。

官方文档地址

npm i vue-baidu-map-offline
npm i vue-baidu-map-3x

安装完插件后，我们先来解决地图api调用的问题。

1. public目录下新建plugin/offline文件夹，把资源放到里面。

2. 然后我们需要在文件夹里放我们的百度api和各种小图标，modules

3. 如果不是直接用作者提供的百度api，则需要改一下api文件内的调用资源路径等等。这里不过多描述，网上有很多教程方法。

ok现在第一个api资源问题就已经解决了，现在我们来解决第二个问题。地图的展示问题

我们都知道，在线地图我们拖动，缩放都是发送新的请求，拿到新的资源来做展示。那么我们现在在内网环境下，拿不到百度的资源，就需要自己来存储瓦片图，供我们来展示。

1. 安装地图下载器 -> 选择你想要展示的地区 -> 下载该地区的瓦片地图。

2. 下载完成之后放入到我们刚才新建的public/plugin/offline/tiles中

3. 这样借助我们的插件 + 刚刚整合进来的资源就可以展示我们的地图啦

注意如果是使用的作者提供的api资源，这里有个我踩过的小坑点。api会调用/plugin/offline/tiles/xxx/xxx.jpg资源。如果下载的瓦片图不是jpg这里是展示不出来地图的。