利用百度地图JSAPI生成h7n9禽流感分布图实现代码

更新时间：2013年04月15日 10:35:13 作者：

本文将详细介绍下如何使用百度地图JSAPI生成的H7N9感染分布图，有对百度api感兴趣的朋友可以参考下哈，希望可以帮助到你

下图为使用百度地图JSAPI生成的H7N9感染分布图示例，其中的数据来自新华网（4.8号），截图如下：

使用的功能列表如下：
1.自定义版权控件功能，即（1）对应的数据来源部分，代码如下：

 
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); 
map.addControl(cr); //添加版权控件 
var bs = map.getBounds(); 
cr.addCopyright({id: 1, content: "<a href='http://news.xinhuanet.com/local/2013-04/08/c_115307243.htm' style='fontFamily:微软雅黑;font-size:18px;background:white'>H7N9数据来源</a>", bounds: bs}); 

2.获取行政边界功能，即（2）对应的四个省市边界，代码如下：

复制代码代码如下:

 
var bdary = new BMap.Boundary();//行政边界服务 
var length=data.length; 
for (var index=0;index<length ;index++ ) 
{ 
(function(index){ //闭包用法 
bdary.get(data[index].city, function(rs){ //获取行政区域 
var count = rs.boundaries.length; //行政区域有几部分多边形组成 
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 }); //建立多边形覆盖物 
if (!bounds)//取行政区域第一组成部分的中心点 
{ 
center=ply.getBounds().getCenter(); 
} 
map.addOverlay(ply); //添加行政边界 
} 
}); 
})(index); 
} 

3. 添加marker点和label，即（3,4）显示表示人的图片及感染人数的label：

复制代码代码如下:

 
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("人数"+data[index].infect,{offset:new BMap.Size(-10,0)});//显示label 
marker1.setLabel(label); 

完整代码如下：

复制代码代码如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<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分布图</title> 
</head> 
<body> 
<div id="allmap"></div> 
</body> 
</html> 
<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); //添加版权控件 
var bs = map.getBounds(); 
cr.addCopyright({id: 1, content: "<a href='http://news.xinhuanet.com/local/2013-04/08/c_115307243.htm' style='fontFamily:微软雅黑;font-size:18px;background:white'>H7N9数据来源</a>", bounds: bs}); 
map.setViewport(new BMap.Bounds(new BMap.Point(114.603589,26.853244),new BMap.Point(122.863975,35.288772))); //调整视野 
var data=[{city:'上海市',infect:10,color:'#FF0000'},{city:'江苏省',infect:6,color:'#EE3B3B'},{city:'安徽省',infect:2,color:'#FFAEB9'},{city:'浙江省',infect:3,color:'#EE3B3B'}]; 
//上海(10例，死亡4例)、江苏(6例)、安徽(2例)、浙江(3例，死亡2例) 4.8号数据 
var bdary = new BMap.Boundary(); 
var length=data.length; 
for (var index=0;index<length ;index++ ) 
{ 
(function(index){ //闭包用法 
bdary.get(data[index].city, function(rs){ //获取行政区域 
var count = rs.boundaries.length; //行政区域有几部分多边形组成 
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 }); //建立多边形覆盖物 
if (!bounds)//取行政区域第一组成部分的中心点 
{ 
center=ply.getBounds().getCenter(); 
} 
map.addOverlay(ply); //添加覆盖物 
} 

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("人数"+data[index].infect,{offset:new BMap.Size(-10,0)});//显示label 
marker1.setLabel(label); 
}); 
})(index); 
} 
</script> 

Done！

您可能感兴趣的文章:

微信小程序实现左滑删除效果源码
这篇文章主要给大家介绍了关于微信小程序实现左滑删除效果的相关资料,左滑删除效果在app的交互方式中十分流行,比如全民应用微信,文中给出了详细的实现代码,需要的朋友可以参考下
2023-08-08
JavaScript如何使用Promise实现分批处理接口请求
当我们在开发时遇到需要同时发起百条接口请求怎么办呢,本文主要来和大家介绍一下JavaScript如何使用Promise实现分批处理接口请求,需要的可以参考下
2024-03-03
微信公众号授权登录的超详细步骤
微信公众号授权登录的使用最为常见,当然只是一些会只有登录,所以选择点击授权登,下面这篇文章主要给大家介绍了微信公众号授权登录的超详细步骤,需要的朋友可以参考下
2022-12-12
layui table 获取分页 limit的方法
今天小编就为大家分享一篇layui table 获取分页 limit的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
利用r.js打包模块化的javascript文件方法示例
这篇文章主要给大家介绍了利用r.js打包模块化的javascript文件的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起看看吧。
2017-06-06
Ionic如何实现下拉刷新与上拉加载功能
在日常项目开发中我们经常见到下拉刷新上拉加载的功能，接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下
2016-06-06
JavaScript中日常收集常见的10种错误(推荐)
本文是小编给大家日常收集整理的js中常见的10种错误，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-01-01
TypeScript之调用栈的实现
这篇文章主要介绍了TypeScript之调用栈的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
详解js创建对象的几种方法及继承
这篇文章主要介绍了js创建对象的几种方法及继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
基于JavaScript实现网红太空人表盘的完整代码
这篇文章主要介绍了基于JavaScript实现网红太空人表盘的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-03-03