Baidu offline map JS API V3.0

       First of all, compared with version 2.0, Baidu Maps JavaScript API version 3.0 has added a few small functions, but there are no major changes overall. You can check the details on the official website. So I made version 3.0 according to the 2.0 offline version shared by the previous masters, and attached the master link: the latest Baidu map API V2.0 offline version   . Thank you for your sharing. Let's start the production of Baidu map offline version V3.0:

       Resource download address: https://download.csdn.net/download/wml00000/10692583   

       Baidu cloud link: https://pan.baidu.com/s/1IM-pcrhbXi--O964L7RJBg Password: v5dv

1. JS API file download

       Visit this address http://api.map.baidu.com/api?v=3.0   , this is the address when importing the online js file, after opening it is a piece of code, find src = "http://api. map.baidu.com/getscript?v=3.0&ak=&services=&t=20180823175819", open this address, you can see the compressed js code, paste these codes, save them locally, first save them in bmap_offline_api_v3 .0_min.js file. Before pasting the code, you can format it first so that you can view and modify it below. Use the pretty print that comes with Google Chrome (that is, the brace tool in the red circle below) to paste the formatted code and save it.

2. Modify the js file saved locally

2.1 Shield ak verification

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;
            a.parentNode.removeChild(a)
        }, t) : e.attachEvent && e.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(e);
            e = s
        }, 1)
    }

Locate the above code and add the commented line, don't make a mistake.

2.2 Reference local tool resources

The various layer classes, marker classes, control classes, etc. provided by Baidu Maps can be regarded as modules. When you use these modules in the map, they will be automatically loaded, so we need to put the js files of these modules first Download it and save it locally. Locate the following code, if there is no mistake, there are a total of 44 modules.

var Ub = {  //修改，这里是所有的模块，用到时自动加载（在线），离线的话要先下载下来放到本地，如 
         //http://api0.map.bdimg.com/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"
    };

In order to modify some content in the main file, first create a map_load.js file and add the following code:

var bmapcfg = {
  'imgext'      : '.jpg',   //瓦片图的后缀  根据需要修改，一般是 .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>');
})();

Locate B.url.domain.main_domain_cdn.baidu[0] in the bmap_offline_api_v3.0_min.js file, comment out the line where it is located, and add this line

B.ka = bmapcfg.home; //Modification, local tool resource reference (offline path), as shown in the figure:

Then use &mod to locate, comment out the line where it is located, and make the following changes:

      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));

At this time, you can create the modules folder, add the js files of the required modules, pay attention to the naming format, and the js code can be obtained like this: http://api0.map.bdimg.com/getmodules?v=3.0&mod=map_dbwcej

The file name is also the same when saving the js file, such as map_dbwcej.js

2.3 Load tiles to local offline tiles

Locate the following code and modify it accordingly:

md.getTilesUrl = function(a, b, c) {
        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 + "&scaler=" + g + (6 == z.ca.ia ? "&color_dep=32&colors=50" : "") + "&udt=" + f).replace(/-(\d+)/gi, "M$1")
		tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:bmapcfg.home + "tiles";
		return tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext; // 使用本地的瓦片 
	}

3. Demo test

Build a demo.html

<!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);  // 创建点坐标  
			map.centerAndZoom(point, 6);                 // 初始化地图，设置中心点坐标和地图级别  
        </script>  
    </body>  
</html>

Be sure to prepare relevant files before running, such as js files in the modules folder, slices in the tiles folder, and some icon files. The files are roughly as follows: