百度离线地图的制作
在不能连接外网的web项目中要使用地图功能,因为不能使用在线地图,所以只能自己制作离线地图,这里使用的是百度地图。
1、离线js文件准备
通过http://api.map.baidu.com/api?v=2.0获得百度api文件
通过以上可以看到api地址 http://api.map.baidu.com/getscript?v=2.0&ak=&services=&t=20180323171755
打开api地址,可以看到,将文件保存到本地,这里命名为apiv2.0.js
2、修改保存下来的apiv2.0.js
搜索Math.random找到如下代码
function pa(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 = M("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 pa(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 = M("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) };
3、设置引用本地资源
搜索z.url.domain.main_domain_cdn.baidu[0],将定义它的字符串定义为空
z.url = z.V_[z.Py]; z.vp = z.url.proto + z.url.domain.baidumap + "/"; z.wc = z.url.proto + ("2" == z.Py ? z.url.domain.main_domain_nocdn.other: z.url.domain.main_domain_nocdn.baidu) + "/"; //z.ma = z.url.proto + ("2" == z.Py ? z.url.domain.main_domain_cdn.other[0] : z.url.domain.main_domain_cdn.baidu[0]) + "/"; z.ma=""; //这里置为空
4、创建本地引用文件
创建文件getmodules2.0.js用来放模块文件,在apiv2.0.js文件,搜素&mod=,
load: function(a, b, c) { var d = this.ib(a); if (d.Bd == this.Fj.bq) c && b(); else { if (d.Bd == this.Fj.oG) { this.kK(a); this.xN(a); var e = this; e.CC == q && (e.CC = o, setTimeout(function() { for (var a = [], b = 0, c = e.Pd.Fn.length; b < c; b++) { var d = e.Pd.Fn[b], l = ""; ja.Ky.eK(d) ? l = ja.Ky.get(d) : (l = "", a.push(d + "_" + Sb[d])); e.Pd.Sv.push({ RM: d, JE: l }) } e.CC = q; e.Pd.Fn.length = 0; // 0 == a.length ? e.VK() : pa(e.hG.YP + "&mod=" + a.join(",")) console.log(a); //这里打印出来的是你需要的模块 0 == a.length ? e.UK() : Qb("js/getmodules2.0.js") //这里引入的是自建的引入模块文文件 }, 1)); d.Bd = this.Fj.HP } d.Qu.push(b) } },
5、获取打印出的模块api
在上述更改中console.log(a) 打印出的是需要的模块,
获取需要的模块api的方式
http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=newvectordrawlib_hmclwu
根据需要改变上述连接中&mod=后面的内容,替换成需要的模块,打开,复制保存到新建的getmodules2.0.js即可,
需要什么模块,获得模块后添加到getmodules2.0.js即可
6、调用本地地图瓦片
//地图js 调用本地地图 var outputPath = 'tiles/'; //地图瓦片所在的文件夹 var fromat = ".png"; var tileLayer = new BMap.TileLayer(); tileLayer.getTilesUrl = function (tileCoord, zoom) { var x = tileCoord.x; var y = tileCoord.y; var url = outputPath + zoom + '/' + x + '/' + y + fromat; return url; } var tileMapType = new BMap.MapType('tileMapType', tileLayer); var map = new BMap.Map("container", { mapType: tileMapType })
以上完全参考https://blog.csdn.net/a312024054/article/details/70213444,仅作个人总结使用