欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用百度地圖JSAPI生成h7n9禽流感分布圖實(shí)現(xiàn)代碼

 更新時(shí)間：2013年04月15日 10:35:13   作者：  
本文將詳細(xì)介紹下如何使用百度地圖JSAPI生成的H7N9感染分布圖，有對(duì)百度api感興趣的朋友可以參考下哈，希望可以幫助到你
下圖為使用百度地圖JSAPI生成的H7N9感染分布圖示例，其中的數(shù)據(jù)來(lái)自新華網(wǎng)（4.8號(hào)），截圖如下：

使用的功能列表如下：
1.自定義版權(quán)控件功能，即（1）對(duì)應(yīng)的數(shù)據(jù)來(lái)源部分，代碼如下：
復(fù)制代碼 代碼如下:

var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});
map.addControl(cr); //添加版權(quán)控件
var bs = map.getBounds();
cr.addCopyright({id: 1, content: "<a style='fontFamily:微軟雅黑;font-size:18px;background:white'>H7N9數(shù)據(jù)來(lái)源</a>", bounds: bs});

2.獲取行政邊界功能，即（2）對(duì)應(yīng)的四個(gè)省市邊界，代碼如下：
復(fù)制代碼 代碼如下:

var bdary = new BMap.Boundary();//行政邊界服務(wù)
var length=data.length;
for (var index=0;index<length ;index++ )
{
(function(index){ //閉包用法
bdary.get(data[index].city, function(rs){ //獲取行政區(qū)域
var count = rs.boundaries.length; //行政區(qū)域有幾部分多邊形組成
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)//取行政區(qū)域第一組成部分的中心點(diǎn)
{
center=ply.getBounds().getCenter();
}
map.addOverlay(ply); //添加行政邊界
}
});
})(index);
}

3. 添加marker點(diǎn)和label，即（3,4）顯示表示人的圖片及感染人數(shù)的label：
復(fù)制代碼 代碼如下:

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

完整代碼如下：
復(fù)制代碼 代碼如下:

<!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); //添加版權(quán)控件
var bs = map.getBounds();
cr.addCopyright({id: 1, content: "<a style='fontFamily:微軟雅黑;font-size:18px;background:white'>H7N9數(shù)據(jù)來(lái)源</a>", bounds: bs});
map.setViewport(new BMap.Bounds(new BMap.Point(114.603589,26.853244),new BMap.Point(122.863975,35.288772))); //調(diào)整視野
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號(hào)數(shù)據(jù)
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){ //獲取行政區(qū)域
var count = rs.boundaries.length; //行政區(qū)域有幾部分多邊形組成
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)//取行政區(qū)域第一組成部分的中心點(diǎn)
{
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("人數(shù)"+data[index].infect,{offset:new BMap.Size(-10,0)});//顯示label
marker1.setLabel(label);
});
})(index);
}
</script>

Done！

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)左滑刪除效果源碼

    微信小程序?qū)崿F(xiàn)左滑刪除效果源碼

    這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)左滑刪除效果的相關(guān)資料,左滑刪除效果在app的交互方式中十分流行,比如全民應(yīng)用微信,文中給出了詳細(xì)的實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2023-08-08
  • JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求

    JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求

    當(dāng)我們?cè)陂_(kāi)發(fā)時(shí)遇到需要同時(shí)發(fā)起百條接口請(qǐng)求怎么辦呢,本文主要來(lái)和大家介紹一下JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求,需要的可以參考下
    2024-03-03
  • 微信公眾號(hào)授權(quán)登錄的超詳細(xì)步驟

    微信公眾號(hào)授權(quán)登錄的超詳細(xì)步驟

    微信公眾號(hào)授權(quán)登錄的使用最為常見(jiàn),當(dāng)然只是一些會(huì)只有登錄,所以選擇點(diǎn)擊授權(quán)登,下面這篇文章主要給大家介紹了微信公眾號(hào)授權(quán)登錄的超詳細(xì)步驟,需要的朋友可以參考下
    2022-12-12
  • layui table 獲取分頁(yè) limit的方法

    layui table 獲取分頁(yè) limit的方法

    今天小編就為大家分享一篇layui table 獲取分頁(yè) limit的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • 利用r.js打包模塊化的javascript文件方法示例

    利用r.js打包模塊化的javascript文件方法示例

    這篇文章主要給大家介紹了利用r.js打包模塊化的javascript文件的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)跟著小編一起看看吧。
    2017-06-06
  • Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能

    Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能

    在日常項(xiàng)目開(kāi)發(fā)中我們經(jīng)常見(jiàn)到下拉刷新上拉加載的功能，接下來(lái)通過(guò)本文給大家介紹ionic如何實(shí)現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下
    2016-06-06
  • JavaScript中日常收集常見(jiàn)的10種錯(cuò)誤(推薦)

    JavaScript中日常收集常見(jiàn)的10種錯(cuò)誤(推薦)

    本文是小編給大家日常收集整理的js中常見(jiàn)的10種錯(cuò)誤，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下
    2017-01-01
  • TypeScript之調(diào)用棧的實(shí)現(xiàn)

    TypeScript之調(diào)用棧的實(shí)現(xiàn)

    這篇文章主要介紹了TypeScript之調(diào)用棧的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • 詳解js創(chuàng)建對(duì)象的幾種方法及繼承

    詳解js創(chuàng)建對(duì)象的幾種方法及繼承

    這篇文章主要介紹了js創(chuàng)建對(duì)象的幾種方法及繼承，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • 基于JavaScript實(shí)現(xiàn)網(wǎng)紅太空人表盤(pán)的完整代碼

    基于JavaScript實(shí)現(xiàn)網(wǎng)紅太空人表盤(pán)的完整代碼

    這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)網(wǎng)紅太空人表盤(pán)的完整代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-03-03

最新評(píng)論