Home > Developer > JavaScript
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
