使用百度地图生成器制作疫情小区地图

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

使用百度地图制作疫情小区地图

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

其实过程很简单，本教程适用于新手站长：文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

制作地图所需工具

百度地图开放平台：http://api.map.baidu.com/lbsapi/createmap/index.html
云服务器：新手站长网使用的是阿里云的香港服务器，这个活动可以看看很便宜：文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

服务器地址：

地址：阿里云·云小站云服务器特惠89元一年起

一：打开百度地图开放平台

定位中心点：默认是北京市，新手站长网以长春市为例，定位中心点城市切换为长春市；设置地图默认即可，也可以自定义。文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

二：添加标注

添加标注核心部分，根据本地卫健委发布的新型冠状病毒确诊病例所在的小区，标注位置。文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

注意：一定要根据本地卫健委提供的疫情数据，以免引起不必要的麻烦。文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

三：百度地图标注数量

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

如上图所示，获取到位置经纬度后，我们可以通过下面的代码添加多条位置标注，在function addMapOverlay()函数里面：文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

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

上述代码中，lat表示纬度，lng表示经度。那么，问题来了，位置坐标的经纬度怎么获取？文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

四：获取标注位置的经纬度坐标

可以使用百度地图拾取坐标系统，来获取经纬度坐标。文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

地址：http://api.map.baidu.com/lbsapi/getpoint/index.html

本来可以使用百度地图生成器自带的“添加标注”功能，由于限制标注数量为10个，如果标注位置较多，可以配合“百度地图拾取坐标系统”获取标注位置的经纬度，通过修改代码，手动添加标注。文章源自新手站长-https://xinshouzhanzhang.com/baidudituyiqing.html

五：获取代码

编辑好地图后，点击下方的“获取代码”，即可获取地图的html代码，如下图：

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

六：没有百度地图密匙报错

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

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

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

七：获取百度地图开放平台AK密匙

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

AK密匙获取地址：http://lbsyun.baidu.com/apiconsole/key

打开上述地址，如下图所示：

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

八：在地图代码中粘贴AK密匙

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

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

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

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

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