基于Mapabc API的周边查询应用

简介: 现在,越来越多的 Location Based 应用,或者Geolocation的应用出现在网络、手机等各种各样的终端上,为人们的日常生活、出行和工作都提供了不少的便利。最常见的就是出门前,利用地图工具,看看合适的公共交通路线,寻找一个自己最满意的方案,既方便有低碳环保。

现在,越来越多的 Location Based 应用,或者Geolocation的应用出现在网络、手机等各种各样的终端上,为人们的日常生活、出行和工作都提供了不少的便利。最常见的就是出门前,利用地图工具,看看合适的公共交通路线,寻找一个自己最满意的方案,既方便有低碳环保。有时候,对周边环境不熟悉,想要找到周边的医院、银行、学校等一些单位的时候,地图同样可以帮上我们的大忙。

今天,我就做了一个基于Mapabc地图API的周边查询工具,利用Mapabc详尽的基础地物信息,为我查找周边的便民信息提供了有利的帮助。

开始之前,我大概需要知道最后的结果是什么样子的,可以借助传统的纸和笔,也可以用现代的原型工具,当然PS这样的重量级工具就不太需要了。下面是效果图:

1131

有了效果图,接下来需要稍微规划一下代码。Mapabc的API在页面加载完成后,需要初始化地图,所以初始化的操作放在一个函数 pageInit() 中。周边查询的操作,希望通过用户输入一个关键词,然后通过点选地图设置中心点的方式实现。那么就需要一个函数来监听鼠标在地图上的单击事件,然后一个负责查询的函数和一个负责显示结果的函数。程序的结构大致如此,接下来就进入实质的编码过程。

编码的重点函数有以下几个:

mapObj.addEventListener(mapObj, MOUSE_CLICK, searchAround);

对地图添加监听事件。

mls.poiSearchByCenterXY(new MLngLat(cordx, cordy),keyword,citycode,mlsp);

利用中心点坐标查询查找周边信息

利用这两个函数,加上参考Mapabc官方的示例,我们就可以完成这个应用。

1132

通过修改区号和关键字,可以在不同城市之间切换,怎么样,简单吧。

Technorati 标签: Map, mapabc, geolocation, 地图
相关文章
|
7天前
|
前端开发 API 网络架构
【Azure 应用服务】能否通过 Authentication 模块配置 Azure AD 保护 API 应用?
【Azure 应用服务】能否通过 Authentication 模块配置 Azure AD 保护 API 应用?
|
22天前
|
API
|
25天前
|
人工智能 Serverless API
AI 创业及变现新思路:零门槛 AI 绘图,定制 ComfyUI Serverless API 应用
为了帮助用户高效率、低成本应对企业级复杂场景,本文介绍 ComfyUI API Serverless 版解决方案,通过使用该方案,用户可以充分利用 ComfyUI +Serverless 技术优势快速开发上线 AI 绘画应用,期待为广大开发者 AI 绘画创业及变现提供思路。
|
20天前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
28 1
|
1天前
|
API 开发者 Python
API接口:原理、实现及应用
本文详细介绍了API接口在现代软件开发中的重要性及其工作原理。API接口作为应用程序间通信的桥梁,通过预定义的方法和协议实现数据和服务的共享。文章首先解释了API接口的概念,接着通过Python Flask框架示例展示了API的设计与实现过程,并强调了安全性的重要性。最后,本文还讨论了API接口在Web服务和移动应用程序等领域的广泛应用场景。
|
4天前
|
数据采集 物联网 数据挖掘
API接口的应用
API接口在现代技术中至关重要,它使不同软件、设备间能相互通信和数据共享。在社交网络中,如Facebook及Twitter的API让开发者能够构建交互式应用;移动应用则依赖API与服务器通信,实现天气查询、地图定位等功能;云计算平台如AWS通过API提供了资源管理和配置服务;物联网设备使用API实现数据交换;视频游戏开发商利用各类平台API发布游戏。此外,API爬虫数据接口技术通过爬虫抽取并输出数据,被广泛应用于获取商业、金融、医疗等领域的大数据,以支持数据分析、策略制定及业务流程优化,极大地提高了数据收集与处理的效率和准确性。
|
6天前
|
JavaScript 前端开发 Linux
【Azure 应用服务】NodeJS Express + MSAL 实现API应用Token认证(AAD OAuth2 idToken)的认证实验 -- passport.authenticate()
【Azure 应用服务】NodeJS Express + MSAL 实现API应用Token认证(AAD OAuth2 idToken)的认证实验 -- passport.authenticate()
|
7天前
|
API
【Azure 环境】在Azure活动目录中的应用注册,给应用添加API权限时发现API权限配置缺失
【Azure 环境】在Azure活动目录中的应用注册,给应用添加API权限时发现API权限配置缺失
|
7天前
|
API 开发工具 数据安全/隐私保护
【Azure Developer】Python 获取Micrisoft Graph API资源的Access Token, 并调用Microsoft Graph API servicePrincipals接口获取应用ID
【Azure Developer】Python 获取Micrisoft Graph API资源的Access Token, 并调用Microsoft Graph API servicePrincipals接口获取应用ID
|
8天前
|
API 数据安全/隐私保护 网络架构
【Azure Developer】使用Postman获取Azure AD中注册应用程序的授权Token,及为Azure REST API设置Authorization
【Azure Developer】使用Postman获取Azure AD中注册应用程序的授权Token,及为Azure REST API设置Authorization