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

简介:

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

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

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

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

制作地图所需工具

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

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

二:添加标注

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

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

三:百度地图标注数量

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

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

地图测试效果图

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

相关实践学习
2分钟自动化部署人生模拟器
本场景将带你借助云效流水线Flow实现人生模拟器小游戏的自动化部署
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
目录
相关文章
|
4月前
|
存储 弹性计算 定位技术
云服务器 ECS产品使用问题之如何重制服务器地图
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
4月前
|
弹性计算 Linux 定位技术
云服务器 ECS产品使用问题之如何重新开设一个新的地图
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
WM
|
弹性计算 小程序 关系型数据库
基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一
作为互联网行业从业者,头脑里总是会冒出各种各样的想法,当然可以用网络笔记、云盘甚至本地的方式等记录下自己的想法,然而如果想要落地尝试,则拥有一台自己的服务器就再好不过了。全栈开发已经讲了很久了,如果是前端,通过nodejs也可以搭建后端服务;如果是后端,通过flutter、uniapp等也可以搭建出各种端上的APP;如果非研发人员,通过低代码开发平台拖拽也可以。有了自己的产品之后,如果不满足于本地跑跑,那么就得面临选择应用的载体了,性价比最高的方式是选择云上ECS,下面拿我的几年使用经验来展开讲一下。
WM
419 0
基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一
|
弹性计算 定位技术
【ECS】资源搜索,给您的云资源画一张地图
随着ECS控制台新版概览页的上线,我们推出了强大的资源搜索功能,具有跨区域搜索、多资源单页面展示、关键词,模糊匹配、多条件,精确查找、大批量,多重定位、地图式结果展示等多种功能特点。为您管理您的云资源再添助力!
8652 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开放地图范例。
|
8天前
|
机器学习/深度学习 人工智能 弹性计算
什么是阿里云GPU云服务器?GPU服务器优势、使用和租赁费用整理
阿里云GPU云服务器提供强大的GPU算力,适用于深度学习、科学计算、图形可视化和视频处理等多种场景。作为亚太领先的云服务提供商,阿里云的GPU云服务器具备灵活的资源配置、高安全性和易用性,支持多种计费模式,帮助企业高效应对计算密集型任务。
|
9天前
|
存储 分布式计算 固态存储
阿里云2核16G、4核32G、8核64G配置云服务器租用收费标准与活动价格参考
2核16G、8核64G、4核32G配置的云服务器处理器与内存比为1:8,这种配比的云服务器一般适用于数据分析与挖掘,Hadoop、Spark集群和数据库,缓存等内存密集型场景,因此,多为企业级用户选择。目前2核16G配置按量收费最低收费标准为0.54元/小时,按月租用标准收费标准为260.44元/1个月。4核32G配置的阿里云服务器按量收费标准最低为1.08元/小时,按月租用标准收费标准为520.88元/1个月。8核64G配置的阿里云服务器按量收费标准最低为2.17元/小时,按月租用标准收费标准为1041.77元/1个月。本文介绍这些配置的最新租用收费标准与活动价格情况,以供参考。
|
7天前
|
机器学习/深度学习 人工智能 弹性计算
阿里云GPU服务器全解析_GPU价格收费标准_GPU优势和使用说明
阿里云GPU云服务器提供强大的GPU算力,适用于深度学习、科学计算、图形可视化和视频处理等场景。作为亚太领先的云服务商,阿里云GPU云服务器具备高灵活性、易用性、容灾备份、安全性和成本效益,支持多种实例规格,满足不同业务需求。