web百度离线地图开发（详细教程）2019

需求情景

项目在内网上使用，不得连接外网，所以需要开发离线地图功能
这个项目是vue+vue-cli的，需要对vue和这种项目结构有些了解
这是自己写的vue项目构建的文章，很详细，不了解的可以看看：
https://blog.csdn.net/PGguoqi/article/details/88977403

主要参考

我这里算是对这次开发做个总结，主要参考了下面两篇文章，但是因为或多或少都不是很详细，中间卡了好久，最后捣鼓出来了，所以写个文章记录分享下，照着一步一步走，绝对能开发出来。
https://blog.csdn.net/wml00000/article/details/82219015
https://blog.csdn.net/a312024054/article/details/70213444
如有谬误，还望指正。希望对大家有所帮助

开发步骤

一、JS API文件下载

访问这个地址 http://api.map.baidu.com/api?v=3.0 ，打开之后是一段代码：
在代码中找到 src="http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20180823175819"，打开这个链接，就可以看到压缩后的js代码，这个是我们要用到的代码：

在站长工具 http://tool.chinaz.com/tools/jsformat.aspx 将上面的压缩代码格式化备用，以便下面查看与修改。
在static/js目录下新建个js文件，我这里命名为 bmap_offline_api_min.js ，将上面格式化后的js代码复制到这个文件中：

最后，需要在入口index.html的head中引入这个js：

二、修改API文件

1、屏蔽ak验证

在 bmap_offline_api_min.js 文件中，用 Math.random() 多找几次，定位到下列代码位置：
（以下代码方法名称和一些变量名称可能会有出入，我下载的代码就和网上一些贴子上看到的代码不尽相同）

function oa(a, b) {
   
    if (b) {
   
        var c = (1E5 * Math.random()).toFixed(0);
        z._rd["_cbk" + c] = function(a) {
   
            b && b(a);
            delete z._rd["_cbk" + c]
        };
        a += "&callback=BMap._rd._cbk" + c
    }
    var d = K("script", {
   
        type: "text/javascript"
    });
    d.charset = "utf-8";
    d.src = a;
    d.addEventListener ? d.addEventListener("load",
        function(a) {
   
            a = a.target;
            a.parentNode.removeChild(a)
        },
        q) : d.attachEvent && d.attachEvent("onreadystatechange",
        function() {
   
            var a = window.event.srcElement;
            a && ("loaded" == a.readyState || "complete" == a.readyState) && a.parentNode.removeChild(a)
        });
    setTimeout(function() {
   
            document.getElementsByTagName("head")[0].appendChild(d);
            d = p
        },
        1)
};

然后修改上面的代码，对http拦截，不进行外部访问，只需在最开始加一行代码if (/^http/.test(a)) return;

function oa(a, b) {
   
	//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    if (/^http/.test(a)) return; // ！！！！！这里加判断，如果是调用外部资源就退出去
    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    if (b) {
   
        var c = (1E5 * Math.random()).toFixed(0);
        z._rd["_cbk" + c] = function(a) {
   
            b && b(a);
            delete z._rd["_cbk" + c]
        };
        a += "&callback=BMap._rd._cbk" + c
    }
    var d = K("script", {
   
        type: "text/javascript"
    });
    d.charset = "utf-8";
    d.src = a;
    d.addEventListener ? d.addEventListener("load",
        function(a) {
   
            a = a.target;
            a.parentNode.removeChild(a)
        },
        q) : d.attachEvent && d.attachEvent("onreadystat