[转原作者文章地址](https://blog.csdn.net/a312024054/article/details/70213444)
离线地图开发(以百度地图为例)
需求
- 需要在离线的情况下也能够加载出地图,使用地图的一些功能(需网络进行云检索的功能除外)
问题:
- 地图 图片资源(瓦片图)
- 地图 api
开始
- 获取 api js
利用 密钥 去http://api.map.baidu.com/getscript?v=2.0&ak=你申请的密钥&services=&t=20180917142401
获取下载拷贝到本地
命名 为 BAIDU.API2.min.js (并用前端工具格式化美化一下代码格式,方便修改)
- 去除ak验证
- 在 BAIDU.API2.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)
};
修改方法就是不进行外部访问
/* 修改后 */
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("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)
};
- 设置引用本地工具资源
- 搜索'z.url.domain.main_domain_cdn.baidu[0]',找到使用它定义的字符串,置为空
z.xp = z.url.proto + z.url.domain.baidumap + "/";
z.wc = z.url.proto + ("2" == z.Qy ? z.url.domain.main_domain_nocdn.other : z.url.domain.main_domain_nocdn.baidu) +
"/";
z.ma = z.url.proto + ("2" == z.Qy ? z.url.domain.main_domain_cdn.other[0] : z.url.domain.main_domain_cdn.baidu[0]) +
"/";
z.cj = z.url.proto + z.url.domain.main_domain_cdn.webmap[0] + "/";
z.cj = ""; //置为空
z.sg = function (a, b) {
var c, d, b = b || "";
switch (a) {
case "main_domain_nocdn":
c = z.wc + b;
break;
...
- 创建本地工具资源文件
在 BAIDU.API2.js 中找到 这个方法
- 注意
- 找到
"&mod="
所在位置行,将 其所表示的参数 替换为 自定义的 工具资源文件js (本文中 js文件为 "lib/js/getModules.js") - 在 "lib/js"目录下创建 getModules.js 作为 API主文件调用本地的工具资源文件
- 找到
load: function (a, b, c) {
var d = this.ib(a);
if (d.Bd == this.Fj.dq) c && b();
else {
if (d.Bd == this.Fj.pG) {
this.lK(a);
this.yN(a);
var e = this;
e.DC == q && (e.DC = o, setTimeout(function () {
for (var a = [], b = 0, c = e.Pd.Gn.length;b < c;b++) {
var d = e.Pd.Gn[b],
l = "";
ia.Ly.fK(d) ? l = ia.Ly.get(d) : (l = "", a.push(d + "_" + Rb[d]));
e.Pd.Tv.push({
SM: d,
KE: l
})
}
e.DC = q;
e.Pd.Gn.length = 0;
// 0 == a.length ? e.WK() : oa(e.iG.ZP + "&mod=" + a.join(",")) 注释掉这行
console.log(a); //这里很重要!帮助我们找到我们需要加载的模块!
0 == a.length ? e.WK() : oa('lib/js/getModules.js')
}, 1));
d.Bd = this.Fj.IP
}
d.Ru.push(b)
}
},
当a这个数组里面是需要请求的模块,getModules.js没有的,打印出来,通过下面方式获取,并放到getModules.js
newvectordrawlib_hmclwu就是a打印出来的模块名称,通过这个链接获取
http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=newvectordrawlib_hmclwu
[demo下载地址](https://pan.baidu.com/s/1pDUFmAzPCUFel1mc0F7AIQ)
密码:anyp