波斯马BOSSMA Information Technology

Google地图实现查找指定地点1公里范围之内的地铁站

发布时间:2011年10月20日 / 分类:JavaScript / 11,587 次浏览 / 评论

现在地铁这么多,确实方便了出行,但是到达一个陌生地方时,找到最近的地铁站还是有点迷茫的。网上已经有一些查找最近地铁站的应用,特别是手机应用,但是对于怎么实现的却一知半解,这篇文章就来一探究竟。

这里通过Google地图的API来实现查找指定地点附近的地铁站的功能,首先准备好全部可以查询的地铁站,然后通过google map解析出来地铁站和指定地点的坐标,然后计算指定地点和每个地铁站的距离,如果距离在五公里之内就在地图上标注出来。

原理就是这么简单,下边看看怎么实现:

以天安门广场上的人民英雄纪念碑为指定中心点。

1、准备好可以查询的地铁站

为了便于处理,这里准备了十几个地铁站作演示,并放到一个数组里边。

2、初始化google maps

引入google maps api,在页面的头部加入javascript文件的引用:

设置初始化参数、显示区域等:

3、查询当前所在位置

通过google maps api获取人民英雄纪念碑的坐标,并在地图上标注出来。

4、在页面加载时显示中心点

将上边的代码整理当到一个函数initialize中,在页面load事件调用这个函数。

现在打开页面应该就可以看到效果了:

5、计算指定地点和每个地铁站的距离

为了更直观的显示,这里通过一个按钮来触发。

计算距离时用到一个函数calDistance,在google map api v2版中有一个方法可以计算坐标之间的直线距离,但是到v3就不提供了。从网上找到这个据说是v2版中实现的,代码如下:

现在点击按钮看看效果:

只有三个地铁站被标注出来:天安门西站、天安门东站、前门站,这三个是1公里之内的。

这篇文章只是做了一个简单的演示,很多细节和功能可以完善的地方没有涉及,有兴趣的朋友可以自己试试。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《Google地图实现查找指定地点1公里范围之内的地铁站

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

目前有2 条评论

  1. jxdyzwh 沙发:

    大哥,有没有一个可以运行的例子,可以给我一个不

发表评论