百度离线地图JS API V3.0

参考博客：https://blog.csdn.net/wml00000/article/details/82219015；

瓦片地图下载工具(全能地图下载器：MapTileDownloader)：百度云链接：https://pan.baidu.com/s/1xhTwFKXVJT07-QkB8R2HoA 提取码：1kzc

---

前言：

本文2019-10-23，参考博客2018-08-30写的，由于百度地图js api更新，我按照博主的步骤一：1.JS API文件下载。下载下来的js文件中没有后文博主所说修改部分的关键字。所以定位的关键字在这做了更改,而且引入的模块也需要重新下载

1，JS API文件下载

访问这个地址http://api.map.baidu.com/api?v=3.0  ，这个是引入在线js文件时的地址，打开之后是一段代码，在代码中找到  src = "http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20191018171908" ，打开这个地址，就可以看到压缩后的js代码，把这些代码粘下来，保存到本地上，就先保存在bmap_offline_api_v3.0_min.js文件里。在粘代码之前可以先格式化一下，以便下面查看与修改，利用谷歌浏览器自带的pretty print（就是下面那个红圈里的大括号工具）就可以，将格式化好的代码粘下来保存。

2.修改保存到本地的js文件

2.1屏蔽ak验证

 根据  &callback=BMap._rd._cbk 搜索bmap_offline_api_v3.0_min.js文件。定位到上面代码，将这句话
”if (/^http/.test(a)) return;//修改 屏蔽ak验证，若调用外部资源直接返回“加上

2.2引用本地工具资源

百度地图提供的各种图层类，标记类，控件类等等都可以看作是modules,当你在地图中用到这些模块时，它会自动加载，因此我们需要先把这些模块的js文件下载下来，保存到本地。定位到下面代码，没数错的话，一共是44个模块。

var Tb = {
    map: "bligqc",
    common: "jrzmva",
    style: "mqdswt",
    tile: "pyqycy",
    groundoverlay: "wbu13l",
    pointcollection: "wtzcqg",
    marker: "hbhixv",
    symbol: "v5r4fq",
    canvablepath: "d31zty",
    vmlcontext: "41oars",
    markeranimation: "q1bipf",
    poly: "0fvpg4",
    draw: "qvliz2",
    drawbysvg: "klpuw3",
    drawbyvml: "d3fj1k",
    drawbycanvas: "dfvt3c",
    infowindow: "jne5cc",
    oppc: "e1hdnm",
    opmb: "3awlxd",
    menu: "szrz5h",
    control: "5l0j2g",
    navictrl: "k2rauw",
    geoctrl: "zpy5at",
    copyrightctrl: "3hu1kt",
    citylistcontrol: "ppkbbr",
    scommon: "1vnny3",
    local: "cj5awq",
    route: "jtkxae",
    othersearch: "14hzow",
    mapclick: "cy1nlp",
    buslinesearch: "xk1vaf",
    hotspot: "jf12gr",
    autocomplete: "pkrvc0",
    coordtrans: "dl5jov",
    coordtransutils: "4gcmt1",
    convertor: "p2frek",
    clayer: "k155fu",
    pservice: "5fgjam",
    pcommon: "fxza45",
    panorama: "g5xxs5",
    panoramaflash: "4jn0ae"
};

这时候就可以创建modules文件夹，添加所需模块的js文件，注意命名格式，js代码可以这么获取：http://api0.map.bdimg.com/getmodules?v=3.0&mod=map_bligqc

保存js文件时文件名也是这样：map_bligqc.js

我下载的modules：百度云网盘：https://pan.baidu.com/s/1YoE48DpSQ_RUQB--vF1Z2Q 提取码：613t

1，为了便于修改主文件里的一些内容，先创建一个map_load.js文件，加入下面代码：

var bmapcfg = {
  'imgext'      : '.png',   //瓦片图的后缀  根据需要修改，一般是 .png .jpg
  'tiles_dir'   : '',       //普通瓦片图的地址，为空默认在tiles/ 目录
};
 
var scripts = document.getElementsByTagName("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>');
})();

2，在bmap_offline_api_v3.0_min.js文件中定位到   url.domain.main_domain_cdn.baidu[0] ，将其所在行注释掉，加上这行

D.oa= bmapcfg.home;  //修改成本地瓦片资源引用(离线路径)

[D.oa 为注释行的开头，所要赋值的属性名。bmapcfg.home为map_load.js中定义的：地图API主目录。如图：]

【注：因为参考博主的瓦片文件夹(tiles)与 js 文件在同一目录下，故可以：D.oa= bmapcfg.home; 而如果没有在同一目录下，需修改成D.oa = 自己的瓦片离线路径，后面 bmapcfg.home 同理】如图：

【而我这使用的"/baidumaps/"是配置的Tomcat的静态资源，tomcat配置静态资源映射】

3，然后再通过 &mod  进行定位，注释掉其所在行，做如下修改：

f.OB = t;
f.Pd.Vm.length = 0;
// 0 == a.length ? f.XJ() : pa(f.tF.$O + "&mod=" + a.join(","))
// 修改 加载本地模块文件，在 modules 目录下
// console.log(a);   //打印所需模块
if( a.length > 0 ){
  for(i=0; i<a.length;i++){
	mf = '/baidumaps/modules/'+a[i]+'.js';
	pa( mf ); //该调用方法为 最开始加屏蔽ak验证 的那个方法，注意修改方法名是否更改
	console.log('加载模块文件:'+mf); //IE error
  }
} else {
  f.XJ();//注意看注释行 f调用的方法名
}
//就到这

2.3加载瓦片改为本地离线瓦片

根据 , f = Sb("normal") 定位到如下代码，做相应修改：

Hd.getTilesUrl = function(a, b, c) {
	var e = a.x
	  , a = a.y
	  , f = Sb("normal")
	  , g = 1
	  , c = Gd[c];
	// this.map.Yw() && (g = 2);
	// e = this.map.oh.Uv(e, b).Ol;
	// return (Fd[Math.abs(e + a) % Fd.length] + "?qt=vtile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + g + (6 == z.ga.ma ? "&color_dep=32&colors=50" : "") + "&udt=" + f).replace(/-(\d+)/gi, "M$1")
	
    var tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:"/baidumaps/tiles";
	return tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext; // 使用本地的瓦片
}

3.Demo测试

根据 http://lbsyun.baidu.com/jsdemo.htm#a1_2 百度地图示例和百度类参数 http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b7 做Demo测试

我这将html和两个js文件放在一个目录下，因为使用的是Tomcat静态资源，所以把images、modules、tiles放在tomcat的webapps下

<!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");                        // 创建Map实例
    var point = new BMap.Point(102.838222,24.889486);  // 创建点坐标
    map.centerAndZoom(point, 14);                // 初始化地图，设置中心点坐标和地图级别
    map.setMinZoom(5);
    map.setMaxZoom(16);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.addControl(new BMap.NavigationControl()); //缩放按钮
    map.addControl(new BMap.ScaleControl());//显示地图的比例关系
</script>
</body>
</html>

效果：

可以看到图片路径是从本地加载的。