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

简介:

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

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

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

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

制作地图所需工具

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

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

二:添加标注

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

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

三:百度地图标注数量

是在实际的使用过程中,新手站长网发现百度地图的添加标注限制为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密匙。

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

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

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

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

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

地图测试效果图

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

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
目录
相关文章
|
3月前
|
存储 弹性计算 定位技术
云服务器 ECS产品使用问题之如何重制服务器地图
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
3月前
|
弹性计算 Linux 定位技术
云服务器 ECS产品使用问题之如何重新开设一个新的地图
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
WM
|
弹性计算 小程序 关系型数据库
基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一
作为互联网行业从业者,头脑里总是会冒出各种各样的想法,当然可以用网络笔记、云盘甚至本地的方式等记录下自己的想法,然而如果想要落地尝试,则拥有一台自己的服务器就再好不过了。全栈开发已经讲了很久了,如果是前端,通过nodejs也可以搭建后端服务;如果是后端,通过flutter、uniapp等也可以搭建出各种端上的APP;如果非研发人员,通过低代码开发平台拖拽也可以。有了自己的产品之后,如果不满足于本地跑跑,那么就得面临选择应用的载体了,性价比最高的方式是选择云上ECS,下面拿我的几年使用经验来展开讲一下。
WM
416 0
基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一
|
弹性计算 定位技术
【ECS】资源搜索,给您的云资源画一张地图
随着ECS控制台新版概览页的上线,我们推出了强大的资源搜索功能,具有跨区域搜索、多资源单页面展示、关键词,模糊匹配、多条件,精确查找、大批量,多重定位、地图式结果展示等多种功能特点。为您管理您的云资源再添助力!
8637 0
【ECS】资源搜索,给您的云资源画一张地图
|
算法 定位技术 图形学
UNITY地图寻路及服务器解决方案
多边形寻路算法简单介绍 http://liweizhaolili.lofter.com/post/1cc70144_86a939e   UNITY3D MMO服务器寻路 http://www.pathengine.
|
关系型数据库 定位技术 数据库
在公司内网上创建自己的 OSM.Planet 街道级别地图服务器及其客户端程序
转自我的BLOG http://blog.csdn.net/goldenhawking/article/details/6402775  最近经过陛下点拨,涉猎了“OpenStreetMap”,做了不少业余研究,把成果给大家分享一下,特别是提供搭建好的客户端-服务器框架,以及中国国内的OSM开放地图范例。
|
6天前
|
存储 弹性计算 安全
阿里云第七代云服务器ECS性能、适用场景与价格参考
阿里云第七代云服务器ECS(Elastic Compute Service)作为阿里云最新一代的高性能计算产品,凭借其基于最新硬件架构和虚拟化技术的全面升级,在计算能力、存储性能、网络传输速度以及灵活性等多个方面实现了显著提升。这一代云服务器旨在为用户提供更为强大、稳定且可定制的云端基础设施服务,广泛适用于从基础的Web托管到复杂的高性能计算等多种应用场景。
|
5天前
|
弹性计算 网络安全
阿里云国际OpenAPI多接口快速管理ECS服务器教程
阿里云国际OpenAPI多接口快速管理ECS服务器教程
|
3天前
|
弹性计算 开发框架 .NET
阿里云服务器购买教程及云服务器地域、实例、操作系统、带宽等参数选择指南
对于初次购买阿里云服务器的用户来说,想使用阿里云服务器搭建网站或者运行APP、小程序等项目,第一步就是要先购买阿里云服务器,下面小编以图文形式给大家介绍一下阿里云服务器的购买流程,以及购买过程中如何云服务器地域、实例、带宽等关键配置和选择这些参数的一些注意事项,以供参考。