vue引入百度离线地图（亲测有效）解决瓦片过大放入nginx的问题

先放成功图：

第一步：当然引入离线地图需要资源包，三个js文件，地址是：（https://download.csdn.net/download/qq_27036043/11751597）（嘿嘿。。）。（样式文件比如地图的css和一些图标不重要，就不上传了）。这三个文件如下，这三个文件需要放入static文件夹下。在vue的index.html中分别引入

要按照这个顺序依次引入。
第二步：如果我们将地图的tiles文件（即百度地图的离线瓦片）放入到vue中的static文件夹中的话，数量小还可以，万一数量很多，很容易在vue 运行npm run dev时造成栈溢出。所以我们要讲tiles这个文件夹放入到nginx中。在nginx.conf中进行配置
具体代码如下

 server{
        listen 9090;
        server_name resource;
         root D:/baidumap/mapapi/tiles/; #放入你百度离线的路径
        autoindex on;
        location / {
            # 跨域问题
           add_header Access-Control-Allow-Origin *;
          add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
          add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        }
           add_header Cache-Control "no-cache,must-revalidate"; //解决缓存问题
    }

下面这一步很重要，就是如何把请求瓦片的路径替换成nginx中的路径。
我们打开BaiduApi_2.0.js这个文件夹。在全文搜索tdir这个关键字。会找到这行代码

tdir = `http://localhost:9090/${b}/${d}/${a}${MAPCONFIG.APIOVERLATYIMAGETYPE}`
 return tdir;

这是我已经配置好的。大家可以根据路径的不同，改写地址就好了。这里我仅仅配置了平面的，没有配置卫星的瓦片路径，如果项配置也是在这个BaiduApi_2.0.js文件夹中全文搜索“卫星”，找到就可以配置了。

最后：就是在map.vue 中使用百度地图了。代码如下。我这里的瓦片是泰州的，所以中心坐标是泰州这里的。大家要想显示其它城市的，必须要换成其它城市的瓦片和中心坐标。中心坐标是下面代码的这一行。
map.centerAndZoom(new BMap.Point(119.939262, 32.488703), 14); //

最后再粘贴出目录结构。

希望这篇文章对大家开发有所帮助。谢谢。大家有问题可以一起讨论?