http://blog.csdn.net/sup_heaven/article/details/8461586
Today's article focuses on how to implement a custom map using the Map API.
Baidu Map API currently supports two map types: normal and three-dimensional plots, which are represented by constants Bmap_normal_map and Bmap_perspective_map, respectively. In version 1.2, these two constants are actually instances of the Maptype object. Of course, developers can also instantiate a maptype themselves to implement a custom map.
Use of transduction tools
Let's start with the use of the Transduction tool, and then analyze the code generated by the tool to learn more about how to customize the map. Transduction Tools on GitHub, the specific address is: Https://github.com/jiazheng/BaiduMapTileCutter, please download TileCutter.exe after entering:
Note that the tool is based on the. NET platform, it requires more than 4 versions of the. NET Framework.
This interface will appear when you start this EXE:
The first thing we need to do is to select a picture as the Basemap for the map (the image is downloaded from here):
Click Next after you need to set the output directory, here we directly select the desktop:
To proceed to the next step, here to set the output type, we use the default values, that is, the tile and related code are generated by the tool:
Coordinate settings We use the default value, which is where the center point of the picture is located. Since we are making a separate map type, the center point is set to 0 and 0.
Level range Settings: We use custom, set the range to 5 to 10 levels, the original is placed in the 10th level, so the 5 to 9 level tool will automatically shrink the picture. Suggest that the original level is the same as the maximum level, or higher than the original level of the picture will be hollow (because the tool will enlarge the image).
Set the name of the map type:
Everything is ready and you can finally confirm that all the information is correct. Then you can click on "Start cutting".
Completed by:
At this point we will find a index.html and a tiles folder on the desktop. We open index.html will see the result:
Source code parsing
Now take a look at the Code section of this page:
<!DOCTYPE html><Html><Head><Title> Custom Map Types</Title><MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 " /><ScriptType= "Text/javascript"Src= "http://api.map.baidu.com/api?v=1.2"></Script></Head><Body><DivId= "Map"Style= "width:800px;height:540px"></Div><ScriptType= "Text/javascript">Var=NewBmap.tilelayer (); Tilelayer.gettilesurl (Tilecoord, zoom) {Xtilecoord.x;YTilecoord.y; tiles/ Zoom /tile X _ Y . png;}MyMap Bmap.maptype (MyMap, Tilelayer, {minzoom:, Maxzoom:});Map Bmap.map ( Map Bmap.navigationcontrol ()) Map.centerandzoom ( Bmap.point (), </script></body> </html>
The code first creates a Tilelayer instance that represents a layer, and then implements the path to the image provided by the Gettilesurl method. The Gettilesurl method is called by the API at the time of layout, which provides the tile number and level information, and the developer has to do is to return the correct image address based on the block number and level information (the contents of the coordinates and tile numbers can be read this article).
The following code creates a Maptype instance, the first parameter is the name of the map type, and the second parameter is the layer corresponding to the map type, where we pass the Tilelayer instance created earlier, followed by some optional configuration parameters, where the minimum and maximum levels are specified.
The following code is very simple, create a map instance, and specify the map type as Mymap through the configuration parameters.
If you have a picture of the moon or Mars, it is not difficult to create a map of the moon or a map of Mars.
Baidu Map API detailed custom map type
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
