The most comprehensive Baidu map JavaScript offline version development _javascript skills

Project requirements Web version of Baidu map to develop offline. Here is a summary of their own development process and experience.

The approximate demand is: Each vehicle installs the company receiver, will real-time feedback vehicle coordinates, the speed, the steering and so on information, receives each vehicle information to draw the vehicle position in the Baidu map immediately. Job points do not necessarily have networks, so they require offline development.

There are three main technical points in this process:

1. How to get the offline API

2. How to get offline tile map

3. How to translate the WGS coordinates into the Baidu map coordinates in the off-line state

Problem Solving Process:

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

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

Here's a tidy copy, which also follows the example demo to write an offline demo. Of course offline is impossible to do and online as perfect, after all, there are some functions can not be used. (This version is based on the Baidu Map API V2.0)

How to use:

1. Determine the image suffix of the tiles you use, such as. png,. jpg. Modify the Imgext in Baidumap_offline_v2_load.js

var bdmapcfg = {
 ' imgext ': '. jpg ',//tile suffix------modified according to need, generally. png. jpg
 ' tiles_dir ': '  //tile catalog, null default in baidumap_v2/tiles/directory
};

2. Determine the directory of your tiles, by default in the Baidumap_v2/tiles/directory, you can also be changed to other addresses. Modify the Tiles_dir in Baidumap_offline_v2_load.js

3. Reference demo to write code, the main points are as follows:

1 load files only need to be loaded
<script type= "Text/javascript" src= "Baidumapv2/baidumap_offline_v2_load.js" ></script>
2 Load CSS file (seemingly not required)
<link rel= "stylesheet" type= text/css "href=". /.. /baidumapv2/css/baidu_map_v2.css "/>
3 Define a container to place the map and use CSS to control height and width
<div id= "Map_demo" ></div>
4) Writing JS code

  <script type= "Text/javascript" >/ 
  /Baidu Map API function
  var map = new Bmap.map ("Map_demo");  Create a Map instance
  map.centerandzoom (new Bmap.point (116.404, 39.915), 8);//initialize maps, set center point coordinates and map level
  //map.addcontrol (new Bmap.maptypecontrol ());  Add Map type control offline only support electronic map, satellite/three-dimensional does not support
  //map.setcurrentcity ("Beijing");     Setting the map shows the city offline map does not support!!
  Map.enablescrollwheelzoom (true);   Turn on the mouse wheel zoom
  Map.addcontrol (New Bmap.navigationcontrol ());  Zoom button
  </script>

2. Get Tile Map

Here 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 to receive the receiver of the coordinates (WGS) into the Baidu map is biased, this is because the Baidu map for security to do a special treatment. The coordinate transformation API is provided in its Web Services API, but it is a coordinate transformation interface provided in HTTP form, so it is still impossible to break out of the network. Here through some professional knowledge will WGS coordinate to GCJ, and then GCJ coordinate to BD Baidu coordinates, the verification accuracy is almost accurate.

public class Coorconvertutil {//pi static double pi = 3.14159265358979324;
    Projection factor of satellite ellipsoid coordinate projection to plane coordinate system static double A = 6378245.0;
    Eccentricity static Double ee = 0.00669342162296594323 of ellipsoid;
    
    Pi Conversion amount Public final static double x_pi = 3.14159265358979324 * 3000.0/180.0;
      public static double[] WGS2BD (double lat, double lon) {double[] wgs2gcj = WGS2GCJ (lat, lon);
      double[] gcj2bd = GCJ2BD (Wgs2gcj[0], wgs2gcj[1]);
    return gcj2bd; /** * GCJ coordinates to Baidu coordinates * @param lat * @param lon * @return/public static double[] Gcj
      2BD (double lat, double lon) {Double x = lon, y = lat;
      Double z = math.sqrt (x * x + y * y) + 0.00002 * Math.sin (y * x_pi);
      Double theta = math.atan2 (y, x) + 0.000003 * MATH.COS (x * x_pi);
      Double Bd_lon = z * Math.Cos (theta) + 0.0065;
      Double Bd_lat = z * Math.sin (theta) + 0.006;
    return new double[] {bd_lat, bd_lon}; public static double[] BD2GCJ (double lat, double lon) {Double x = lon-0.0065, y = lat-0.006;
      Double z = math.sqrt (x * x + y * y)-0.00002 * Math.sin (y * x_pi);
      Double theta = math.atan2 (y, x)-0.000003 * MATH.COS (x * x_pi);
      Double Gg_lon = z * Math.Cos (theta);
      Double Gg_lat = z * Math.sin (theta);
    return new double[] {gg_lat, gg_lon}; /** * WGS coordinates to GCJ coordinates * @param lat * @param lon * @return * * * public static double[] WG
      S2GCJ (double lat, double lon) {Double Dlat = Transformlat (lon-105.0, lat-35.0);
      Double Dlon = Transformlon (lon-105.0, lat-35.0);
      Double Radlat = lat/180.0 * PI;
      Double magic = Math.sin (Radlat);
      Magic = 1-ee * Magic * MAGIC;
      Double sqrtmagic = math.sqrt (Magic);
      Dlat = (Dlat * 180.0)/((A * (1-ee))/(Magic * sqrtmagic) * pi);
      Dlon = (Dlon * 180.0)/(A/sqrtmagic * MATH.COS (Radlat) * pi);
      Double Mglat = lat + Dlat; Double Mglon = lon + DLOn
      double[] loc = {mglat, mglon};
    Return LOC; private static double Transformlat (double lat, double lon) {DOUBLE ret = -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;
    return ret;  private static double Transformlon (double lat, double lon) {DOUBLE ret = 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;
    return ret; /** * Degree of change * @param lat latitude ddmm.mmmm * @param lon Longitude DDDMM.MMMM * @return * * * publi
      C Static double[] Dufen2du (String lat, string lon) {double latd=double.parsedouble (lat.substring (0, 2));
      Double Latm=double.parsedouble (lat.substring (2));
      Double latnew=latd+latm/60;
      Double lond=double.parsedouble (lon.substring (0, 3));
      Double Lonm=double.parsedouble (lon.substring (3));
      Double lonnew=lond+lonm/60;
    return new double[] {latnew, lonnew};  }
}

Finally look at the project effect screenshot:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.