Use Baidu map JSAPI to generate the h7n9 Avian Influenza distribution chart to implement code _ javascript skills

This article will introduce in detail how to use Baidu map JSAPI to generate a H7N9 infection distribution chart. If you are interested in Baidu api, refer to the following, we hope to help you with the H7N9 infection distribution chart generated by using Baidu map JSAPI. The data is from xinhuanet (No. 4.8), as shown below:

The list of functions used is as follows:
1. Customize the copyright control function, that is, (1) the corresponding data source section. The Code is as follows:

The Code is as follows:

Var cr = new BMap. CopyrightControl ({anchor: BMAP_ANCHOR_TOP_RIGHT });
Map. addControl (cr); // Add a copyright control
Var bs = map. getBounds ();
Cr. addCopyright ({id: 1, content: "H7N9 data source", bounds: bs });

2. Obtain the administrative boundary function, that is, the border of the four provinces and cities corresponding to (2). The Code is as follows:

The Code is as follows:

Var bdary = new BMap. Boundary (); // administrative Boundary service
Var length = data. length;
For (var index = 0; index {
(Function (index) {// closure usage
Bdary. get (data [index]. city, function (rs) {// obtain the Administrative Region
Var count = rs. boundaries. length; // The administrative area consists of several polygon.
Var bounds;
Var center;
For (var I = 0; I <count; I ++ ){
Ply = new BMap. polygon (rs. boundaries [I], {strokeWeight: 2, strokeColor: data [index]. color, fillColor: data [index]. color, fillOpacity: 0.8}); // create a polygon covering.
If (! Bounds) // obtain the central point of the first part of the administrative area
{
Center = ply. getBounds (). getCenter ();
}
Map. addOverlay (ply); // Add administrative boundaries
}
});
}) (Index );
}

3. Add the marker and label, that is, (3, 4) to display the picture of the infected person and the label of the infected person:

The Code is as follows:

Var myIcon = new BMap. Icon ("infection.png", new BMap. Size (27,60 ));
Var marker1 = new BMap. Marker (center, {icon: myIcon}); // marker
Map. addOverlay (marker1 );
Var label = new BMap. Label ("count" + data [index]. infect, {offset: new BMap. Size (-10, 0)}); // display label
Marker1.setLabel (label );

The complete code is as follows:

The Code is as follows: