小白如何本身亲手制做一个防疫地图？

时间 2020-02-23

标签白如本身亲手制做一个防疫地图繁體版

原文原文链接

最近出了好几个小程序能够查看你周边地区当前疫情确诊人数的状况，就好比下面这种的：javascript

这张图对于身为小白的咱们可不能够本身作一个呢？css

答案固然是确定的，这里面涉及到的技术点就是地图上的那些点是如何标记出来的。html

这里的地图咱们使用腾讯地图来实现，首先进入到腾讯位置服务的首页（ lbs.qq.com/index.html ），进行登陆操做，用 QQ 也好微信也好，反正先登陆上去。java

而后在控制台中新建一个 key ，这个 key 是专属于你一我的使用的，因此千万不要外传哦~~~编程

这里咱们新建一个专门用于本次疫情地图的 key ，名称输入完成后，再输入验证码点击提交便可，这时会弹出来了一个让你去设置 key 的提示。小程序

这里咱们就得到了本身的 key （小编已删除此 key ，请不要直接使用小编所建立的 key），点击设置进入设置页面：微信小程序

能够看到，这里能够设置这个 key 所应用的茶品，默认是 JavaScriptAPI ，咱们还能够在微信小程序、APP、或者 WebServiceAPI（服务器调用）中使用。api

这里其实不须要多余的设置，直接点击保存便可。咱们本次示例所使用到的功能都是最基础的功能。服务器

key 设置完成后咱们看一下腾讯地图的 API ，这里主要是看 JavaScript API ，连接：lbs.qq.com/javascript_… 。微信

咱们本次要用到的功能是覆盖物，其余的感兴趣的同窗能够看一看，不感兴趣的同窗能够直接略过，点开覆盖物查看今天的正题。

直接看代码好没意思，点击查看示例，能够一边看示例，一边看代码，顺手改改，看看能不能正常运行。

点击查看示例之后，就变成下面这个样子了：

这里能够看到他的中心点是在北京，其实是由这段代码来指定的：

var center = new qq.maps.LatLng(39.916527,116.397128);
    var map = new qq.maps.Map(document.getElementById('container'),{
        center: center,
        zoom: 13
    });
复制代码

若是小编这里要改为上海的话只须要修改这里的坐标值便可，那么上海的坐标值我能去哪里查找呢？

别急，这里就要说到今天会用到的另外一个功能点，坐标拾取器，腾讯也提供了这样的服务，连接为：lbs.qq.com/tool/getpoi… ，他是长这个样子的：

好比小编这里将地图的中心点改为人民广场地铁站，那么直接将上面的坐标 Copy 出来，放在刚才的代码中再执行一下，就能够看到当前的地图中心点编程了人民广场。

那么，接下来的事情就好办了，咱们只须要知道附近的疫情的数据，将这些有疫情的区域全都标记在地图上就行了，小编这里就不查真实的疫情状况了，随便在地图上取几个点作演示。

结果就变成了这样：

接下来问题来了，咱们看到的地图上的标记好像图形和这个不同嘛，这个长得也有点忒丑了点，固然，腾讯地图给咱们提供的 API 一样支持自定义的 icon ，示例以下：

emmmmmmmmmmm，手头没有找到好看一点的 icon ，随便找了一张代替，你们理解到位就好。

只要咱们替换上合适的 icon ，就能够作出和文章最前面那个小程序同样漂亮的疫情地图了。

最后的没有替换 icon 的代码小编仍是顺手贴一下吧：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>疫情地图</title>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>
<style type="text/css"> *{ margin:0px; padding:0px; } body, button, input, select, textarea { font: 12px/16px Verdana, Helvetica, Arial, sans-serif; } #info{ width:603px; padding-top:3px; overflow:hidden; } .btn{ width:112px; } #container{ min-width:600px; min-height:767px; } </style>
<script> var init = function() { var center = new qq.maps.LatLng(31.232708,121.475537); var map = new qq.maps.Map(document.getElementById('container'),{ center: center, zoom: 13 }); //建立marker var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(31.232105,121.481667), map: map }); //建立marker var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(31.235114,121.471281), map: map }); //建立marker var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(31.227261,121.480465), map: map }); //建立marker var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(31.226821,121.471796), map: map }); //建立marker var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(31.216545,121.467419), map: map }); //建立marker var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(31.216839,121.480808), map: map }); //建立marker var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(31.218454,121.492825), map: map }); } </script>
</head>
<body onload="init()">
<div id="container"></div>
</body>
</html>

复制代码

这里只须要替换一个可用的 key 便可使用。

到这里，你能够把全部已经有确诊患者小区的经纬度获取到，而后所有标注到地图上，天天对标注进行实时更新，这样就制做成了一张防疫地图了，有兴趣的同窗能够本身去尝试尝试。

实际上腾讯地图上还有不少很好玩的同时也很炫酷的功能，如如下图形：

你们能够本身去探索。

若是个人文章对您有帮助，请扫码关注下做者的公众号：获取最新干货推送：）