使用的功能列表如下：
1.自定义版权控件功能，即（1）对应的数据来源部分，代码如下：
communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > 利用百度地图JSAPI生成h7n9禽流感分布图实现代码_javascript技巧

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

WBOY
Libérer： 2016-05-16 17:36:56
original
1165 Les gens l'ont consulté

下图为使用百度地图JSAPI生成的H7N9感染分布图示例，其中的数据来自新华网（4.8号），截图如下：
利用百度地图JSAPI生成h7n9禽流感分布图实现代码_javascript技巧
使用的功能列表如下：
1.自定义版权控件功能，即（1）对应的数据来源部分，代码如下：

复制代码 代码如下:

var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});
map.addControl(cr); //添加版权控件
var bs = map.getBounds();
cr.addCopyright({id: 1, content: "H7N9数据来源", bounds: bs});

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

var bdary = new BMap.Boundary();//行政边界服务
var length=data.length;
for (var index=0;index{
(function(index){ //闭包用法
bdary.get(data[index].city, function(rs){ //获取行政区域
var count = rs.boundaries.length; //行政区域有几部分多边形组成
var bounds;
var center;
for(var i = 0; 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);

完整代码如下：
复制代码 代码如下:







H7N9分布图







Done！
Étiquettes associées：
百度地图
source：php.cn
Article précédent：JS中 用户登录系统的解决办法_基础知识 Article suivant：JS中批量给元素绑定事件过程中的相关问题使用闭包解决_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Utiliser Eloquent pour les requêtes internes L'adresse de l'image contient l'emplacement et le nombre total d'utilisateurs. Utilisateur...
Depuis 2024-04-06 16:45:50
0
1
515
J'ai des problèmes avec une grille CSS dont la hauteur n'est pas celle à laquelle je m'attendais, quelles erreurs pourrais-je commettre ? J'apprends actuellement les grilles CSS et on m'a demandé de créer cette carte en la décom...
Depuis 2024-04-06 12:52:14
0
1
339
Comment puis-je faire correspondre la largeur du texte à la largeur d'une image/titre de taille dynamique ? Voir ce codepen : https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0<div><i...
Depuis 2024-04-06 10:04:43
0
2
386
Confus lors de l'envoi de données d'image binaire (jpg) au backend AWS Lambda via AWS API Gateway Toutes mes excuses par avance s'il me manque quelque chose de simple ! J'ai envoyé avec su...
Depuis 2024-04-05 13:09:55
0
1
389
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal