Implement offline Baidu map

1. Related Baidu map information:

Baidu map is divided into 1.3 version and 2.0 version, I use version 2.0 , but basically the process is the same.

Baidu map api official website: http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html

Baidu map uses the api demo ; http://developer.baidu.com/map/jsdemo.htm#a1_2

The above two can basically see the use of all APIs .

2. Understand what is offline Baidu map

I use the offline Baidu map because there is a project that needs to use the map, but when I use it, I can't access the external network, so I can only use the offline Baidu map.

Therefore, the offline Baidu map can be opened normally even when you do not have a network.

When we write an offline Baidu map, the things we need to prepare are the Baidu map tile (that is, the map background image), the js file of a Baidu map api that can be used offline, and the necessary understanding of the Baidu map api .

This will allow you to write code.

3. Start preparing to download files and reference materials

When I wrote it, I referred to: https://my.oschina.net/smzd/blog/628173

There is a code demo written by this great god that can be downloaded directly. The main thing to use is

apiv2.0.2.min.js--- The rewritten Baidu map api file can be offline

findtiles.js--- Calculate tiles by latitude and longitude and zoom level

getmodules.js---- Sometimes apiv2.0.2.min.js does not contain all the functions, so you need to add the modules of the required functions to this file. The address to get the code of these modules is

http://api.map.baidu.com/getmodules?v=1.3&mod=map,oppc,tile,control,marker

Put the name of the module you need after the mod inside .

4. Start writing code

After getting the demo above , you can basically realize the offline Baidu map.

Here are a few things to note:

(1) : The demo above cannot display the information box, so we need to add an infowindow module to getmodules.js by ourselves . If you really can't find this module, you can download my demo on the following github .

(2): If the tiles are downloaded, they are downloaded one by one, and you can re-modify a code by yourself to complete the one-time download.

5. Download the tiles of Baidu map

When we download Baidu map tiles. It is necessary to strictly follow certain naming rules. Otherwise it won't be found

Let me talk about my approach, because there are a lot of software that can directly download Baidu map tiles. Such as Taile map, almighty electronic map and so on. What I use here is the Taile map combined with the above-mentioned code to download the map, and at the same time download the tiles by yourself and the Taile map. After downloading the tiles, you can quickly download and complete up to 14 map tiles. .

6. What functions need to be added to realize a basic function offline Baidu map

Basically to implement an offline Baidu map, several functions are necessary:

Click events for logos, drawing graphics, infoboxes, logos

(1) Logo

var p0 =devData[index].x; //
 var p1 =devData[index].y; // The latitude and longitude of the map point coordinates are respectively proposed according to the point format of the original array 
pointer = new window.BMap.Point(p0, p1); // loop to generate new map points 
var myIcon = new BMap.Icon("assets/module/map/images/node.png", new BMap.Size(34, 40 ));  
marker = new window.BMap.Marker(pointer,{icon: myIcon}); // Generate markers according to map point coordinates 
map.addOverlay(marker);

（2）绘制图形

 var polyline = new BMap.Polygon([
                new BMap.Point(p0-0.02,p1-0.02),
                new BMap.Point(p0+0.04,p1),
                new BMap.Point(p0+0.04,p1-0.02),
                new BMap.Point(p0-0.02,p1-0.02),
                new BMap.Point(p0-0.02,p1-0.02),
], {strokeColor:"#333",fillColor:"#efefef",fillColorOpacity:"0.4",strokeWeight:2, strokeOpacity:0.3}); 
map.addOverlay(polyline);

（3）信息框和标志的点击事件

var opts = {
      width : 250,     // 信息窗口宽度
      height: 80,     // 信息窗口高度
      title : "机房信息" , // 信息窗口标题
      enableMessage:true//设置允许信息窗发送短息
};
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>"+devData[index].con+"</p>",opts);
marker.addEventListener("mouseover", function () {
     this.openInfoWindow(infoWindow); 
});

改进下载瓦片代码：https://github.com/GainLoss/summary 里面的baidumap2.0.3

Implement offline Baidu map

Guess you like