使用阿里云服务器制作疫情小区地图

2020-02-11 2356

简介：

+关注继续查看

疫情特殊时期作为站长总该做点什么，根据本地卫健委发布的新型冠状病毒确诊病例所在地做一个动态的疫情小区地图吧，新手站长网使用百度地图生成器搭配阿里云服务器制作教程：

使用阿里云服务器制作疫情小区地图

疫情特殊时期新手站长网有个本地社群，发现市民对于新型冠状病毒确诊病例所在小区很关注，于是利用百度地图生成器制作了一个疫情小区地图（地图仅供自己测试玩的，没敢发布）。

其实过程很简单，本教程适用于新手站长：

制作地图所需工具

定位中心点：默认是北京市，新手站长网以长春市为例，定位中心点城市切换为长春市；设置地图默认即可，也可以自定义。

添加标注核心部分，根据本地卫健委发布的新型冠状病毒确诊病例所在的小区，标注位置。
在地图上添加位置标注

注意：一定要根据本地卫健委提供的疫情数据，以免引起不必要的麻烦。

是在实际的使用过程中，新手站长网发现百度地图的添加标注限制为10个，如何解决呢？这个限制只是在使用地图生成器时限制10个，我们获取到位置所在经纬度坐标，可以在生成的地图代码上自行手动添加标注。
标注位置经纬度

如上图所示，获取到位置经纬度后，我们可以通过下面的代码添加多条位置标注，在function addMapOverlay()函数里面：

{content:"某某区小区名字",title:"小区名字",imageOffset: {width:-46,height:-21},position:{lat:43.891924,lng:125.319539}},

上述代码中，lat表示纬度，lng表示经度。那么，问题来了，位置坐标的经纬度怎么获取？

可以使用百度地图拾取坐标系统，来获取经纬度坐标。地址：http://api.map.baidu.com/lbsapi/getpoint/index.html

本来可以使用百度地图生成器自带的“添加标注”功能，由于限制标注数量为10个，如果标注位置较多，可以配合“百度地图拾取坐标系统”获取标注位置的经纬度，通过修改代码，手动添加标注。

编辑好地图后，点击下方的“获取代码”，即可获取地图的html代码，如下图：
使用百度地图生成器制作疫情小区地图

复制获取到的代码，保存为html文件。

打开第五步中获取的html代码，我们发现并不能直接使用，会提示：

百度未授权使用地图API，可能是因为您提供的密钥不是有效的百度LBS开放平台密钥，或此密钥未对本应用的百度地图JavaScriptAPI授权。您可以访问如下网址了解如何获取有效的密钥：http://lbsyun.baidu.com/apiconsole/key#。

地图生成工具基于百度地图JS api v2.0版本开发，为了正常使用百度地图API服务，请在此段代码中加入您的密匙。报错是由于没有填写百度地图API密匙，我们去获取一下密匙。

如果没有账号，先注册一个百度开放平台的账号，然后创建应用，如果是浏览器端调用，应用类型选择浏览器端，如下图所示：

百度地图开放平台创建应用

打开上述地址，如下图所示：
复制密匙即复制访问应用（AK）

访问应用（AK）就是我们需要的密匙，复制AK密匙。

找到第五步中获取的代码，把“您的密匙”替换成你刚刚复制的AK密匙，代码如下：

    
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密匙"></script>

这时候再次打开获取到的html地图文件，可以正常使用。我们也可以通过iframe的方式，将代码调用到网站代码中。

最后，新手站长网基于本地卫健委制作的疫情小区地图效果图，如下所示：

地图测试效果图

最后，不出门、不串门、不聚集、戴口罩，不给祖国添麻烦，加油武汉，加油中国！