百度离线地图JSAPIV3.0
⾸先，百度地图JavaScript API 3.0版本与2.0版本相⽐增加了⼏个⼩功能，整体没有⼤的改动，具体可以在官⽹上查阅。于是就照着先前⼤佬们分享的2.0离线版本进⾏3.0版本的制作，附上⼤佬链接：最新百度地图API V2.0 离线版本 感谢⼤佬的分享。下⾯开始百度地图离线版V3.0的制作：
1.JS API⽂件下载
2.修改保存到本地的js⽂件
2.1屏蔽ak验证
function oa(a, b) {
if (/^http/.test(a)) return;//修改屏蔽ak验证，若调⽤外部资源直接返回
if (b) {
var c = (1E5 * Math.random()).toFixed(0);
B._rd["_cbk" + c] = function(a) {
b && b(a);
delete B._rd["_cbk" + c]
}
;
a += "&callback=BMap._rd._cbk" + c
}
var e = L("script", {
type: "text/javascript"
});
e.charset = "utf-8";
e.src = a;
e.addEventListener ? e.addEventListener("load", function(a) {
a = a.target;
veChild(a)
}, t) : e.attachEvent && e.attachEvent("onreadystatechange", function() {
var a = window.event.srcElement;
a && ("loaded" == a.readyState || "complete" == a.readyState) && veChild(a)
});
setTimeout(function() {
如何下载javascript
e = s
}, 1)
}
定位到上⾯代码，将带注释那⾏加上，千万别定位错了。(未尝试)
2.2引⽤本地⼯具资源
百度地图提供的各种图层类，标记类，控件类等等都可以看作是modules，当你在地图中⽤到这些模块时，它会⾃动加载，因此我们需要先把这些模块的js⽂件下载下来，保存到本地。定位到下⾯代码，没数错的话，⼀共是44个模块。
var Ub = { //修改，这⾥是所有的模块，⽤到时⾃动加载（在线），离线的话要先下载下来放到本地，如 //api0.map.bdimg/getmodules?v=3.0&mod=模块1，模块2
//模块命名格式是map_dbwcej，直接拼接起来
map: "dbwcej",
common: "wkrfcz",
style: "fkofpc",
tile: "ok3b3m",
vectordrawlib: "4pdipq",
newvectordrawlib: "wbnuee",
groundoverlay: "ekozhc",
pointcollection: "feabuc",
marker: "00uyqy",
symbol: "cq3a5n",
canvablepath: "dia5aw",
vmlcontext: "phwtog",
markeranimation: "rfnmxu",
poly: "r52vuo",
draw: "jb4osz",
drawbysvg: "vxyn51",
drawbyvml: "whxmqq",
drawbycanvas: "ufwkvb",
infowindow: "wtflsn",
oppc: "10riq5",
opmb: "2c1ejz",
menu: "152mop",
control: "hlzh1t",
navictrl: "h32mnb",
geoctrl: "xprajs",
copyrightctrl: "gmc2ps",
citylistcontrol: "ms3ahy",
scommon: "oadc3d",
local: "k0pcpi",
route: "v4yyam",
othersearch: "pwg4ey",
mapclick: "e40viw",
buslinesearch: "vxmb31",
hotspot: "vuwxs4",
autocomplete: "punr3o",
coordtrans: "lmf5kv",
coordtransutils: "d33qf1",
convertor: "d0ze2w",
clayer: "0hwrfx",
pservice: "j5tlrp",
pcommon: "yqek4k",
panorama: "jbqj24",
panoramaflash: "dm4xq2",
vector: "2hrruc"
};
为了便于修改主⽂件⾥的⼀些内容，先创建⼀个map_load.js⽂件，加⼊下⾯代码：
var bmapcfg = {
'imgext' : '.jpg', //⽡⽚图的后缀根据需要修改，⼀般是 .png .jpg
'tiles_dir' : '', //普通⽡⽚图的地址，为空默认在tiles/ ⽬录
};
var scripts = ElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src"); //获得当前js⽂件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); //地图API主⽬录
(function(){
window.BMap_loadScriptTime = (new Date).getTime();
//加载地图API主⽂件
document.write('<script type="text/javascript" src="'+bmapcfg.home+'bmap_offline_api_v3.0_min.js"></script>');
})();
在bmap_offline_api_v3.0_min.js⽂件中定位到 B.url.domain.main_domain_cdn.baidu[0] ，将其所在⾏注释掉，加上这⾏B.ka = bmapcfg.home; //修改，本地⼯具资源引⽤(离线路径)，如图：
然后再通过 &mod 进⾏定位，注释掉其所在⾏，做如下修改：
f.Rd.Hn.length = 0;
//0 == a.length ? f.kL() : oa(f.wG.tQ + "&mod=" + a.join(","))
// 修改加载本地模块⽂件，在 modules ⽬录下
console.log(a); //打印所需模块
if( a.length > 0 ){
for(i=0; i<a.length;i++){
mf = bmapcfg.home+'modules/'+a[i]+'.js';
oa( mf );
console.log('加载模块⽂件:'+mf); //IE error
}
} else {
f.kL()
}
//就到这
}, 1));
保存js⽂件时⽂件名也是这样如map_dbwcej.js
2.3加载⽡⽚改为本地离线⽡⽚
定位到如下代码，做相应修改：
var e = a.x
, a = a.y
, f = Sb("normal")
, g = 1
, c = ld[c];
//this.map.Sx() && (g = 2); //修改
//e = this.map.Va.Lw(e, b).hs;
/
/return (kd[Math.abs(e + a) % kd.length] + "?qt=tile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scale tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:bmapcfg.home + "tiles";
return tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext; // 使⽤本地的⽡⽚
}
3.Demo测试
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="map_load.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container")
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
</script>
</body>
</html>
运⾏前⼀定要准备好相关⽂件，如modules⽂件夹⾥的js⽂件，tiles⽂件夹⾥的切⽚，还有⼀些图标⽂件，⽂件⼤概如下：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论