Web version baidu map load offline tiles

Note: This article refers to the Web tutorial, tiles are also downloaded through the network. Pay tribute to the original person! Original address: http://download.csdn.net/download/dkm8873/9233731

The original version has been a long time, due to code obfuscation compression, can not add tags and other features. This article by modifying the latest code to achieve the offline version of the purpose, and the function can be arbitrarily expanded. Every step of this article is tested and foolproof.

Click here to download the full version of demo code directly

First, prepare a folder to place the source code, and then put the acquired files in. Create three folders: JS, CSS, images.

The first step, naturally, is to access a portal: http://api.map.baidu.com/api?v=1.3

Inside the content is this (originally did not wrap, in order to read convenience, added two return):

(function () {window. Bmap_loadscripttime = (new Date). GetTime (); document.write (' <script type= ' Text/javascript "src=" document.write (' <link rel= ' stylesheet "type=" Text/css " href= "Http://api.map.baidu.com/res/13/bmap.css"/> ');}) ();

This step will get the location of a JS file and the unknown of a CSS file, and then download it separately and put it in the prepared folder, which I store in/js and/css respectively. JS path is followed by a number of parameters, regardless, downloaded files renamed, such as called Apiv1.3.min.js.

The next step is to modify the JS in a bit of code. Because the code is compressed on one line, it's a bit cumbersome to modify.

1. Search variable: "Imgpath" until a piece of code is found (also adds a carriage return):

var x=m? " https://sapi.map.baidu.com/":" http://api.map.baidu.com/"; var cd={imgpath:x+" images/", citynames:{" \U5317\U4EAC ": "BJ",

Remove the x from the imgpath:x+ "images/" so that it becomes a relative position unrelated to the network address. The images folder, which is indicated here, is in the directory parallel to the future HTML folder.

2. Search for variables: "_baseurl" until you find such a piece of code (this is relatively simple)

preloaded:{},config:{_baseurl:x+ "getmodules?v=1.3", _timeout:5000},

Also, to remove X, this x is also the x in the preceding code. At the same time, not only to remove the X, but also to point to the JS directory.

Preloaded:{},config:{_baseurl: "js/", _timeout:5000},

This address is used to dynamically load components. What components are used in the system, and which components are loaded on the download. The final system accesses a URL-loaded component similar to "Http://api.map.baidu.com/getmodules?v=1.3&mod=map,oppc,tile,control,marker".

As you can see, I'm more directly writing the load address to death. Look at step three.

Continue searching for the next "_baseurl" to get the following code:

Window.settimeout (function () {var cp=cn.config._baseurl+ "&mod=" +cn.module._arrmdls.join (","); Cy.request (CP); cn.module._arrmdls.length=0;cn.delayflag=false},1)

Modify the CP variable directly, write dead well, that's what I do:

var cp=cn.config._baseurl+ "Getmodules.js"; cy.request (CP);

In this way, we loaded the dynamic loading program manually. We visit this address "http://api.map.baidu.com/getmodules?v=1.3&mod=map,oppc,tile,control,marker" can get a JS file. Rename it to the "getmodules.js" specified above and leave it in the JS folder.

If you need more features, and do not need to load automatically, anyway, it is local, but also the configuration parameters to get the relevant functions just fine.

3. The key step and the most complex step: search for "Gettilesurl" until you find one (reference can also be used, such as "Bmap_normal_map"):

if (this.map.highResolutionEnabled ()) {cp= "ph"}var cm=j[math.abs (Cr+co)%j.length]+ "? qt=tile&x=" + (cr+ ""). Replace (/-/gi, "M") + "&y=" + (co+ ""). Replace (/-/gi, "M") + "&z=" +cq+ "&styles=" +cp+ (a9.browser.ie==6? ") &color_dep=32&colors=50 ":") + "&udt=" +t;return cm.replace (/-(\d+)/gi, "m$1")};window. bmap_normal_map=

This code is so long, I format it to see (code interception is longer than the above)

    au.gettilesurl = function (CN, CQ)  {         var cr = cn.x;        var co  = cN.y;        var T =  "20150518";         var cP =  "PL";         if  (this.map.highResolutionEnabled ())  {             cP =  "PH"         }         var cm = j[math.abs (Cr + co)  % j.length]  +  "? qt=tile&x="                  +  (cr +  ""). Replace (/-/gi,  "M")  +  "&y="                  +  (co +  ""). Replace (/-/gi,  "M")  +   "&z="  + cQ +  "&styles="  + cP                 +  (a9.browser.ie == 6 ?  " &color_dep=32&colors=50 " : " ")                  +  "&udt="  + T;         return cm.replace (/-(\d+)/gi,  "m$1")     };     Window. BMAP_NORMAL_MAP = NEW CV ("\u5730\u56fe", au, {         tips :  "\u663e\u793a\u666e\u901a\u5730\u56fe"     });

Say "Gettilesurl" This method, here is the key method to return the tile unknown. Two parameters, the first parameter is {x, y}, and the second parameter is Z, so XYZ has it.

A short circuit, and directly calculate the result of the CM to recalculate, change to:

This place abandoned the above calculation results, directly using the local image CM = "tiles/" + CQ + "/" + CR + "/" + CO + ". jpg";

This means we have to create a fourth folder, tiles. The contents of this folder and the following resource files should be downloaded in the attachment. As for how to download tiles, please baidu it yourself.

OK, the processing of this file is over.

The second step: Download the picture and other resource files.

This process is very good, to find all the picture files inside the bmap.css, download it and put it in the designated folder inside the good. A total of no more than two or three files, downloaded down in the images folder inside the line. In addition, just this JS inside there are some resource files, also downloaded down in the images folder inside. This can be found by searching Imgpath, there is PNG, there is GIF, a bit of file may need to be downloaded via HTTPS address.

The third step, write Demo.html bar. This direct sticker code.

<! doctype html>
：
Web version baidu map load offline tiles