The project requires the web version of Baidu map to be developed offline. Here is a summary of your own development process and experience.
The approximate requirement is: each car is equipped with a company receiver, which will feedback the vehicle's coordinates, speed, steering and other information in real time, and after receiving the information of each vehicle, the vehicle location is drawn on Baidu map in real time. The work points do not necessarily have networks, so offline development is required.
There are three main technical points in this process:
1. How to get offline API
2. How to get offline tile diagrams
3. How to convert WGS coordinates to Baidu map coordinates when offline
Problem resolution process:
1. Since Baidu Maps does not support offline maps, we need to find a way to change the online code to offline code.
Here you can refer to: http://my.oschina.net/smzd/blog/548538
I have compiled a copy here, and I also wrote an offline demo according to the example demo. Of course, offline cannot be as perfect as online, after all, some functions are still unusable. (This version is based on Baidu Maps API V2.0)
How to use:
1. Determine the image suffix of the tile you use, such as .png, .jpg. Modify imgext in baidumap_offline_v2_load.js
var bdmapcfg = { 'imgext':'.jpg', //The suffix of the tile picture-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------2. Determine the directory of the tile you use. By default, it is in the baidumap_v2/tiles/ directory, and you can also change it to another address. Modify tiles_dir in baidumap_offline_v2_load.js
3. Refer to demo to write code, the key points are as follows:
1) Just load the load file
<script type="text/javascript" src="baidumapv2/baidumap_offline_v2_load.js"></script>
2) Load the css file (it seems not necessary)
<link rel="stylesheet" type="text/css" href="../../baiduumapv2/css/baidu_map_v2.css"/>
3) Define a container for placing 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 function var map = new BMap.Map("map_demo"); // Create Map instance map.centerAndZoom(new BMap.Point(116.404, 39.915), 8); // Initialize the map, set the center point coordinates and map level //map.addControl(new BMap.MapTypeControl()); // Add map type control to only support electronic maps offline, and satellite/3D does not support //map.setCurrentCity("Beijing"); // Set offline maps displayed by the map do not support! ! map.enableScrollWheelZoom(true); //Open the mouse wheel to zoom map.addControl(new BMap.NavigationControl()); //Scaling button</script>2. Get the tile diagram
Here you can refer to: http://my.oschina.net/smzd/blog/619397
Of course, there are also download tools online, such as: all-round electronic map downloader
3. It is biased to directly place the coordinates (WGS) received by the receiver into Baidu Map, because Baidu Map has made special treatments for safety. Its Web service API provides a coordinate conversion API, but it is a coordinate conversion interface provided in HTTP, so it still cannot be separated from the network. Here, we use some professional knowledge to convert WGS coordinates to GCJ, and then to convert GCJ coordinates 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 of ellipsoid static double ee = 0.00669342162296594323; //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[] gcj2bd(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[] wgs2gcj(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) + 320 * 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 division and rotation* @param lat latitude ddmm.mmmm * @param lon Longitude dddmm.mmmm * @return */ public 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 screenshot of the project effect:
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.