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

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

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

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

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

mapObj.addEventListener(mapObj, MOUSE_CLICK, searchAround);

对地图添加监听事件。

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

利用中心点坐标查询查找周边信息
利用这两个函数，加上参考Mapabc官方的示例，我们就可以完成这个应用。

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