The following figure shows an example of H7N9 infection distribution using the JSAPI of the Baidu map, with the data from Xinhua (No. 4.8), and the screenshot below:
The list of features used is as follows:
1. Customize the function of the copyright control, that is (1) the corresponding data source section, the code is as follows:
Copy Code code 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: "<a href= ' http://news.xinhuanet.com/local/2013-04/08/c_115307243.htm ' style= ') FontFamily: Microsoft Jas; Font-size:18px;background:white ' >h7n9 data source </a> ', bounds:bs};
2. Access to the administrative boundary function, that is (2) the corresponding four provinces and cities border, the code is as follows:
Copy Code code as follows:
var bdary = new Bmap.boundary ()//Administrative boundary service
var length=data.length;
for (var index=0;index<length; index++)
{
(function (index) {//Closure usage
Bdary.get (data[index].city, function (RS) {//Acquire administrative area
var count = rs.boundaries.length; There are several parts of the administrative area 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}); Building a polygon overlay
if (!bounds)//Take 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 point and label, that is, (3,4) displays the picture of the person and the number of infected labels:
Copy Code code 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 ("number" +data[index].infect,{offset:new bmap.size ( -10,0)});//Display label
Marker1.setlabel (label);
The complete code is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
Body, HTML, #allmap {width:100%;height:100%;overflow:hidden;margin:0;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=1.4" ></script>
<TITLE>H7N9 Distribution Map </title>
<body>
<div id= "Allmap" ></div>
</body>
<script type= "Text/javascript" >
var map = new Bmap.map ("Allmap");
Map.centerandzoom (New Bmap.point (116.403765, 39.914850), 5);
Map.enablescrollwheelzoom ();
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: "<a href= ' http://news.xinhuanet.com/local/2013-04/08/c_115307243.htm ' style= ') FontFamily: Microsoft Jas; Font-size:18px;background:white ' >h7n9 data source </a> ', bounds:bs};
Map.setviewport (New Bmap.bounds (New Bmap.point (114.603589,26.853244), New Bmap.point (122.863975,35.288772)); Adjust the field of vision
var data=[{city: ' Shanghai City ', Infect:10,color: ' #FF0000 '},{city: ' Jiangsu Province ', Infect:6,color: ' #EE3B3B '},{city: ' Anhui Province ', Infect:2, Color: ' #FFAEB9 '},{city: ' Zhejiang province ', Infect:3,color: ' #EE3B3B '}];
Shanghai (10 cases, death 4 cases), Jiangsu (6 cases), Anhui (2 cases), Zhejiang (3 cases, death 2 cases) No. 4.8 data
var bdary = new Bmap.boundary ();
var length=data.length;
for (var index=0;index<length; index++)
{
(function (index) {//Closure usage
Bdary.get (data[index].city, function (RS) {//Acquire administrative area
var count = rs.boundaries.length; There are several parts of the administrative area 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}); Building a polygon overlay
if (!bounds)//Take the central point of the first part of the administrative area
{
Center=ply.getbounds (). Getcenter ();
}
Map.addoverlay (ply); Add Overlay
}
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 ("number" +data[index].infect,{offset:new bmap.size ( -10,0)});//Display label
Marker1.setlabel (label);
});
}) (index);
}
</script>
done!
