Use Baidu map offline javascript API to load a local tile Map

Source: Internet
Author: User

1. First obtain Baidu javascript API

First open http://api.map.baidu.com/api with a browser? See Figure V = 1.3.

Where http://api.map.baidu.com/getscript? The link v = 1.3 & Key = & Services = & t = 20121108061854 is the API file we are looking,

Open it in the browser and save it as "apiv1.3.min. js"

Some widgets, cursors, logos, and other images required for Baidu maps are also downloaded.

2. Modify "apiv1.3.min. js" to replace the images, cursors, logos, and other links of the map control with the cost.

3. Download Baidu map tiles, which can be obtained in many ways. For example, this tool: maptiledownloader

4. start to use the offline map API to load local map slices.

Now, you can use Baidu map from the Internet. The source code is as follows:

 1 <! Doctype HTML> 2 <HTML> 3       4 <Head> 5 <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> 6 <Title> Baidu offline map demonstration </title> 7 <SCRIPT type = "text/JavaScript" src = "JS/apiv1.3.min. js"> </SCRIPT> 8 <SCRIPT type = "text/JavaScript" src = "JS/map, oppc, navictrl, tile, copyrightctrl"> </SCRIPT> 9 <! -- Script Type = "text/JavaScript" src = "http://api.map.baidu.com/api? V= 1.3 "> </script --> 10 <LINK rel = "stylesheet" type = "text/CSS" href = "bmap.css"/> 11 </Head> 12       13 <Body> 14 <Div style = "Left: 0; top: 0; width: 100%; Height: 100%; position: absolute;" id = "Container"> </div> 15 </Body> 16   17 </Html> 18 <SCRIPT type = "text/JavaScript"> 19       VaR Tilelayer = New  Bmap. tilelayer ({  20 Istransparentpng: True  21   });  22 Tilelayer. gettilesurl = Function  (Tilecoord, zoom ){  23           VaR X = Tilecoord. X;  24           VaR Y = Tilecoord. Y;  25           Return 'Maptile/'+ zoom +'/'+ x +'/'+ Y + '.png';  26   }  27       28       VaR Map = New Bmap. Map ('Container' );  29   Map. addtilelayer (tilelayer );  30 Map. addcontrol ( New  Bmap. navigationcontrol ());  31 Map. centerandzoom ( New Bmap. Point (100.675, 39.007978), 5 );  32 Map. enablescrollwheelzoom (); //  Enable scroll wheel zoom in and out  33 Map. enablekeyboard (); //  Enable the keyboard operation, which is disabled by default. You can move the map from top to bottom to right on the keyboard.  34 Map. enablecontinuouszoom (); //  Enable Continuous scaling  35   36       VaR Copyctrl =New  Bmap. copyrightcontrol ({  37   Anchor: bmap_anchor_bottom_right  38   });  39   Copyctrl. addcopyright ({  40 ID: 1 ,  41 Content: "http://maptiledownloader.googlecode.com Baidu offline map demonstration" 42   });  43  Map. addcontrol (copyctrl );  44 </SCRIPT>

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.