源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 236|回复: 20

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2013-4-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!
回复

使用道具 举报

6

主题

1万

回帖

174

积分

注册会员

Rank: 2

积分
174
发表于 2022-12-21 02:48:10 | 显示全部楼层
这个源码还可以
回复 支持 反对

使用道具 举报

1

主题

1386

回帖

1509

积分

金牌会员

Rank: 6Rank: 6

积分
1509
发表于 2023-1-26 02:06:45 | 显示全部楼层
来看看!!!
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

163

积分

注册会员

Rank: 2

积分
163
发表于 2023-10-11 07:51:39 | 显示全部楼层
啦啦啦啦啦啦啦啦!
TS人妖演出表演服务q3268336102电话13168842816
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

262

积分

中级会员

Rank: 3Rank: 3

积分
262
发表于 2024-4-8 09:58:01 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

247

积分

中级会员

Rank: 3Rank: 3

积分
247
发表于 2024-4-8 18:14:57 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

97

积分

注册会员

Rank: 2

积分
97
发表于 2024-5-28 17:15:29 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-6-23 22:55:23 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-7-3 08:55:55 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

61

积分

注册会员

Rank: 2

积分
61
发表于 2024-7-17 21:27:21 | 显示全部楼层
看到这帖子真是高兴!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 07:56 , Processed in 0.083783 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表