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

简介:

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

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

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

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

制作地图所需工具

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

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

二:添加标注

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

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

三:百度地图标注数量

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

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

地图测试效果图

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

相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
7天玩转云服务器
云服务器ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,可降低 IT 成本,提升运维效率。本课程手把手带你了解ECS、掌握基本操作、动手实操快照管理、镜像管理等。了解产品详情:&nbsp;https://www.aliyun.com/product/ecs
目录
相关文章
|
存储 弹性计算 定位技术
云服务器 ECS产品使用问题之如何重制服务器地图
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
|
弹性计算 Linux 定位技术
云服务器 ECS产品使用问题之如何重新开设一个新的地图
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
WM
|
弹性计算 小程序 关系型数据库
基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一
作为互联网行业从业者,头脑里总是会冒出各种各样的想法,当然可以用网络笔记、云盘甚至本地的方式等记录下自己的想法,然而如果想要落地尝试,则拥有一台自己的服务器就再好不过了。全栈开发已经讲了很久了,如果是前端,通过nodejs也可以搭建后端服务;如果是后端,通过flutter、uniapp等也可以搭建出各种端上的APP;如果非研发人员,通过低代码开发平台拖拽也可以。有了自己的产品之后,如果不满足于本地跑跑,那么就得面临选择应用的载体了,性价比最高的方式是选择云上ECS,下面拿我的几年使用经验来展开讲一下。
WM
512 0
基于ECS搭建的应用示例(博客、密码管理、同学地图、APP服务端等)详解之一
|
弹性计算 定位技术
【ECS】资源搜索,给您的云资源画一张地图
随着ECS控制台新版概览页的上线,我们推出了强大的资源搜索功能,具有跨区域搜索、多资源单页面展示、关键词,模糊匹配、多条件,精确查找、大批量,多重定位、地图式结果展示等多种功能特点。为您管理您的云资源再添助力!
8841 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开放地图范例。
|
1月前
|
弹性计算 运维 安全
阿里云轻量应用服务器与云服务器ECS啥区别?新手帮助教程
阿里云轻量应用服务器适合个人开发者搭建博客、测试环境等低流量场景,操作简单、成本低;ECS适用于企业级高负载业务,功能强大、灵活可扩展。二者在性能、网络、镜像及运维管理上差异显著,用户应根据实际需求选择。
211 10
|
30天前
|
运维 安全 Ubuntu
阿里云渠道商:服务器操作系统怎么选?
阿里云提供丰富操作系统镜像,涵盖Windows与主流Linux发行版。选型需综合技术兼容性、运维成本、安全稳定等因素。推荐Alibaba Cloud Linux、Ubuntu等用于Web与容器场景,Windows Server支撑.NET应用。建议优先选用LTS版本并进行测试验证,通过标准化镜像管理提升部署效率与一致性。
|
1月前
|
弹性计算 ice
阿里云4核8g服务器多少钱一年?1个月和1小时价格,省钱购买方法分享
阿里云4核8G服务器价格因实例类型而异,经济型e实例约159元/月,计算型c9i约371元/月,按小时计费最低0.45元。实际购买享折扣,1年最高可省至1578元,附主流ECS实例及CPU型号参考。
324 8

热门文章

最新文章