The most comprehensive version of the Baidu map JavaScript offline development

The project requires the web version of Baidu Map to be developed offline. Here is a summary of their own development process and experience.

The approximate demand is: Each car installed a company receiver, will be real-time feedback vehicle coordinates, speed, steering and other information, received the vehicle information in the Baidu map on the real-time picture of the vehicle location. Job sites do not necessarily have networks, so they require offline development.

This process consists of three technical points:

1. How to get the offline API

2. How to get offline tile map

3. How to convert WGS coordinates to Baidu map coordinates in offline state

Problem Solving Process:

1. Since Baidu Map official does not support offline maps, then we need to find ways to change the online code to offline code.

Here you can refer to: http://my.oschina.net/smzd/blog/548538

Here we have a copy, which also follows the sample demo to write an offline demo. Of course, offline is impossible to do and online as perfect, after all, some features can not be used. ( This version is based on Baidu Map API V2.0)

How to use:

1determine the picture suffix of the tile you are using, such as. png,. jpg. Modify the Imgext in Baidumap_offline_v2_load.jsvarBdmapcfg = {  ' Imgext ': '. jpg ',//the suffix of the tile map------modified as needed, usually. png. jpg' Tiles_dir ': '//Table of contents of tile map, empty default in baidumap_v2/tiles/directory};2. Determine the directory of tiles you use, default in baidumap_v2/tiles/directory, you can also change to another address. Modify the Tiles_dir in Baidumap_offline_v2_load.js3. Refer to the demo to write code, key points are as follows:1only load files need to be loaded<script type= "Text/javascript" src= "Baidumapv2/baidumap_offline_v2_load.js" ></script> 2) Loading the CSS file (seemingly not required)<link rel= "stylesheet" type= "Text/css" href= ". /.. /baidumapv2/css/baidu_map_v2.css "/> 3define a container to place the map, and use CSS to control the height and width<div id= "Map_demo" ></div> 4) write JS code<script type= "Text/javascript" >//Baidu Map API features    varMap =NewBmap.map ("Map_demo");//Create a Map instanceMap.centerandzoom (NewBmap.point (116.404, 39.915), 8);//initialize map, set center point coordinates and map level    //Map.addcontrol (New Bmap.maptypecontrol ()); Add Map type control offline only support e-map, satellite/three-dimensional not supported    //map.setcurrentcity ("Beijing"); Setting the map to show the city offline map is not supported!! Map.enablescrollwheelzoom (true);//Turn on mouse wheel zoomMap.addcontrol (NewBmap.navigationcontrol ());//Zoom button</script>

2. Get Tile Map

Here you can refer to: http://my.oschina.net/smzd/blog/619397

Of course, there are download tools on the Internet, such as: Universal Electronic Map Downloader

3. Directly the receiver received the coordinates (WGS) into the Baidu map is biased, this is because Baidu map for security to do a special treatment. The coordinate transformation API is available in its Web Services API, but it is a coordinate transformation interface provided in HTTP form, so it is still not possible to get out of the network. Here through a number of professional knowledge will WGS coordinates to GCJ, and then the GCJ coordinate to BD Baidu coordinates, verified accuracy is almost accurate.

 Public classCoorconvertutil {//Pi        Static DoublePI = 3.14159265358979324; //projection factors for projection of satellite ellipsoid coordinates to planar coordinate system        Static DoubleA = 6378245.0; //eccentricity of the ellipsoid        Static DoubleEE = 0.00669342162296594323; //Pi Conversion Amount         Public Final Static DoubleX_PI = 3.14159265358979324 * 3000.0/180.0;  Public Static Double[] WGS2BD (DoubleLatDoubleLon) {            Double[] WGS2GCJ =WGS2GCJ (lat, lon); Double[] gcj2bd = GCJ2BD (wgs2gcj[0], wgs2gcj[1]); returngcj2bd; }                /*** GCJ coordinates turn to Baidu coordinates *@paramlat *@paramLon *@return         */         Public Static Double[] GCJ2BD (DoubleLatDoubleLon) {            Doublex = lon, y =lat; Doublez = MATH.SQRT (x * x + y * y) + 0.00002 * Math.sin (Y *x_pi); Doubletheta = math.atan2 (y, x) + 0.000003 * MATH.COS (x *x_pi); DoubleBd_lon = Z * Math.Cos (theta) + 0.0065; DoubleBd_lat = Z * Math.sin (theta) + 0.006; return New Double[] {bd_lat, bd_lon}; }                 Public Static Double[] BD2GCJ (DoubleLatDoubleLon) {            Doublex = lon-0.0065, y = lat-0.006; Doublez = MATH.SQRT (x * x + y * y)-0.00002 * Math.sin (Y *x_pi); Doubletheta = math.atan2 (y, x)-0.000003 * MATH.COS (x *x_pi); DoubleGg_lon = Z *Math.Cos (theta); DoubleGg_lat = Z *Math.sin (theta); return New Double[] {gg_lat, gg_lon}; }                /*** WGS coordinates to GCJ coordinates *@paramlat *@paramLon *@return         */         Public Static Double[] WGS2GCJ (DoubleLatDoubleLon) {            DoubleDlat = Transformlat (lon-105.0, lat-35.0); DoubleDlon = Transformlon (lon-105.0, lat-35.0); DoubleRadlat = lat/180.0 *Pi; DoubleMagic =Math.sin (Radlat); Magic= 1-ee * Magic *Magic; DoubleSqrtmagic =math.sqrt (Magic); Dlat= (Dlat * 180.0)/((A * (1-ee))/(Magic * sqrtmagic) *pi); Dlon= (Dlon * 180.0)/(A/sqrtmagic * MATH.COS (Radlat) *pi); DoubleMglat = Lat +Dlat; DoubleMglon = lon +Dlon; Double[] loc ={mglat, mglon}; returnLoc; }                Private Static DoubleTransformlat (DoubleLatDoubleLon) {            DoubleRET = -100.0 + 2.0 * lat + 3.0 * Lon + 0.2 * Lon * LON + 0.1 * lat * lon + 0.2 *math.sqrt (Math.Abs (LAT)); RET+ = (20.0 * Math.sin (6.0 * lat * pi) + 20.0 * Math.sin (2.0 * lat * pi)) * 2.0/3.0; RET+ = (20.0 * Math.sin (LON * pi) + 40.0 * Math.sin (lon/3.0 * pi)) * 2.0/3.0; RET+ = (160.0 * Math.sin (lon/12.0 * pi) + * * Math.sin (LON * pi/30.0)) * 2.0/3.0; returnret; }                Private Static DoubleTransformlon (DoubleLatDoubleLon) {            Doubleret = 300.0 + LAT + 2.0 * lon + 0.1 * lat * lat + 0.1 * lat * lon + 0.1 *math.sqrt (Math.Abs (LAT)); RET+ = (20.0 * Math.sin (6.0 * lat * pi) + 20.0 * Math.sin (2.0 * lat * pi)) * 2.0/3.0; RET+ = (20.0 * Math.sin (lat * pi) + 40.0 * Math.sin (lat/3.0 * pi)) * 2.0/3.0; RET+ = (150.0 * Math.sin (lat/12.0 * pi) + 300.0 * Math.sin (lat/30.0 * pi)) * 2.0/3.0; returnret; }                /*** Degree of change of degrees *@paramlat Latitude ddmm.mmmm *@paramlon Longitude Dddmm.mmmm *@return         */         Public Static Double[] dufen2du (String lat, string lon) {DoubleLatd=double.parsedouble (lat.substring (0, 2)); DoubleLatm=double.parsedouble (Lat.substring (2)); DoubleLatnew=latd+latm/60; DoubleLond=double.parsedouble (lon.substring (0, 3)); DoubleLonm=double.parsedouble (Lon.substring (3)); DoubleLonnew=lond+lonm/60; return New Double[] {latnew, lonnew}; }}

Finally see the results of the project:

Example: Http://pan.baidu.com/s/1c1DBnZq

The most comprehensive version of the Baidu map JavaScript offline development