总第192篇/张俊红
最近有几个小程序可以查询你周边小区新型冠状病毒的确诊人数情况，通过这个小程序你可以看到你周围疫情的情况，具体如下图所示：
这张图是怎么做出来的呢？我们可不可以自己做一个呢？是可以的，这张图里面涉及到的技术点就是那些小红标怎么标出来的？
这个小红标我们都可以通过百度地图API来实现，首先进入到百度地图API的网站(http://lbsyun.baidu.com/index.php?title=jspopular)，这里有一些介绍百度地图API的使用说明。
其他文档看起来可能都比较无聊，我们直接看示例DEMO部分，点进去以后左边菜单栏就会看到实现各种功能的示例：
我们先来看第一个小红标的实现，小红标是属于覆盖物，所以我们点击覆盖物示例进去，选择设置新图标，就可以看到在右边图中显示出一个小红标，显示这个小红标的核心其实就是指明显示位置，即小红标所在的经纬度，就是中间我红框框住的代码部分。
如果你要想把北京市有确诊的小区标注出来，那么你只需要把这些小区的经纬度全部获取到，然后在这里面指明即可，下面是我随便新增了几个标注示例：
小红标标注出来以后，我们有的时候也想看一下在你方圆多少公里外有没有疫情，方圆多少其实就是在你当前位置周围画一个圆，圆也属于一种覆盖物，我们在设置覆盖物显示/隐藏这里可以看到如何添加一个圆的方法，piont表示在哪个位置附近添加圆，500表示圆的大小，通过这段代码圆也就可以实现了：
只需要把上面添加标注和添加圆的两部分代码组合在一起就可以达到文章开头防疫地图的效果。具体代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<title>设置点的新图标</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
//添加第一个小红标注
var pt1 = new BMap.Point(116.417, 39.909);
var marker1 = new BMap.Marker(pt1); // 创建标注
map.addOverlay(marker1); // 将标注添加到地图中
//添加第二个小红标注
var pt2 = new BMap.Point(116.40, 39.92);
var marker2 = new BMap.Marker(pt2); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
//添加第三个小红标注
var pt3 = new BMap.Point(116.39, 39.90);
var marker3 = new BMap.Marker(pt3); // 创建标注
map.addOverlay(marker3); // 将标注添加到地图中
//添加第四个小红标注
var pt4 = new BMap.Point(116.39, 39.92);
var marker4 = new BMap.Marker(pt4); // 创建标注
map.addOverlay(marker4); // 将标注添加到地图中
//添加第五个小红标注
var pt5 = new BMap.Point(116.41, 39.90);
var marker5 = new BMap.Marker(pt5); // 创建标注
map.addOverlay(marker5); // 将标注添加到地图中
//添加圆覆盖物
var circle = new BMap.Circle(point,500);
map.addOverlay(circle); //增加圆
hideOver();
</script>
在使用上面代码之前，需要先去百度地图官网注册一下，获得你专属的地图密钥(如果不会，可以百度搜索百度地图密钥申请)，然后替换我代码中你的密钥部分，目前地图中心坐标为北京天安门，你也可以替换成其他地方的经纬度，做完这两步骤以后，将上面的代码复制到你电脑记事本中，然后存储为.html格式，用浏览器打开就会看到如下效果：
你可以把所有已经有确诊患者小区的经纬度获取到，然后全部标注到地图上，每天对标注进行实时更新，这样就制作成了一张防疫地图了，有兴趣的同学可以自己去尝试尝试。百度地图除了上面我们用到的这两个简单的功能以外，还有很多比较好玩的操作，大家可以自行去探索。
如何获取一个地方的经纬度：
http://www.gpsspg.com/maps.htm
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
