脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → h7n9分布图

利用百度地图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！
您可能感兴趣的文章:

相关文章

  • 手把手15分钟搭一个企业级脚手架

    手把手15分钟搭一个企业级脚手架

    这篇文章主要介绍了手把手15分钟搭一个企业级脚手架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JS如何实现文本框随文本的长度而增长

    JS如何实现文本框随文本的长度而增长

    这篇文章主要介绍了JS如何实现文本框随文本的长度而增长的方法,具有一定借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 禁止JS运行的代码

    禁止JS运行的代码

    如果我们要让页面上的javascript不运行，方法最简单的就是使用noscript标签，经常被用来屏蔽那些免费空间要加上的JS。
    2011-01-01
  • 简单谈谈Javascript中类型的判断

    简单谈谈Javascript中类型的判断

    这篇文章主要是对判断javascript的数据类型的判断方式进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2015-10-10
  • javascript刷新父页面的各种方法汇总

    javascript刷新父页面的各种方法汇总

    这篇文章主要对javascript刷新父页面的各种方法做下汇总,需要的朋友可以参考下
    2014-09-09
  • uniapp中实现App自动检测版本升级的示例代码

    uniapp中实现App自动检测版本升级的示例代码

    本文主要介绍了uniapp中实现App自动检测版本升级的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • JavaScript必备的断点调试技巧总结（推荐）

    JavaScript必备的断点调试技巧总结（推荐）

    打断点操作很简单,核心的问题在于,断点怎么打才能够排查出代码的问题所在呢?下面这篇文章主要给大家总结介绍了关于JavaScript必备的断点调试技巧,需要的朋友可以参考下
    2021-09-09
  • 深入理解MVC中的时间js格式化

    深入理解MVC中的时间js格式化

    下面小编就为大家带来一篇深入理解MVC中的时间js格式化。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js运动应用实例解析

    js运动应用实例解析

    这篇文章主要针对js运动应用进行实例解析
    2015-12-12
  • ES5 ES6中Array对象去除重复项的方法总结

    ES5 ES6中Array对象去除重复项的方法总结

    这篇文章主要给大家介绍了Array对象去除重复项的相关资料，文中通过示例代码详细介绍了在ES5和ES6中Array对象去除重复项的方法，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-04-04

最新评论