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

发布时间：2011年10月20日 / 分类：JavaScript / 21,342 次浏览 / 评论

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

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

原理就是这么简单，下边看看怎么实现：

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

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

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

var arrAddr=['天安门西地铁站','天安门东地铁站','西单地铁站','东单地铁站','王府井地铁站','前门地铁站','宣武门地铁站','复兴门地铁站','国贸地铁站','东直门地铁站','三元桥地铁站','动物园地铁站','五棵松地铁站'];

2、初始化google maps

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

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh"></script>

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

var map; // 地图对象
var centerlocation; // 地图中心点坐标
var geocoder; // 地图解析API

// 地图初始化参数
	var myOptions = {
	  zoom: 15,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	// 指定地图显示区域，并根据参数初始化
	map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

3、查询当前所在位置

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

geocoder = new google.maps.Geocoder();
	if (geocoder) {
		// 地理位置解析
		geocoder.geocode( { 'address': '北京+人民英雄纪念碑'}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				// 获取中心点坐标
				centerlocation=results[0].geometry.location;

				// 设置地图中心
				map.setCenter(centerlocation);

				// 标注中心点
				new google.maps.Marker({
					map: map,
					position: centerlocation
				});

			} else {
			  alert("Parse address error for reason: " + status);
			}
		});
	}

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

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

// 附加地图初始化处理到页面load事件
google.maps.event.addDomListener(window, 'load', initialize);

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

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

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

<input type="button" value="查找1公里内的地铁站" onclick="QueryRailway()" />

// 查找地铁站
function QueryRailway(){
	for(var i in arrAddr)
	{
		markRailway(arrAddr[i]);
	}
}

// 解析指定的地址，判断是否在范围之内，如果是则标注
function markRailway(address) {
	if (geocoder) {
	  geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {

			var location=results[0].geometry.location;
			if(calDistance(centerlocation.lat(),centerlocation.lng(),location.lat(),location.lng())<=1){
				var marker = new google.maps.Marker({
					map: map,
					position: location
				});
			}
		} else {
		  //alert("解析地址请求失败，原因: " + status);
		}
	  });
	}
}

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

// 计算两点之间的距离
	var EARTH_RADIUS = 6378.137;//地球半径，单位为公里

	function rad(d){   //计算弧度
		return d * Math.PI / 180.0;
	}

	//计算两个经纬度坐标之间的距离，返回单位为公里的数值
	function calDistance(lat1, lng1, lat2, lng2){
		var radLat1 = rad(lat1);
		var radLat2 = rad(lat2);
		var a = radLat1 - radLat2;
		var b = rad(lng1) - rad(lng2)
		var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
		s = s * EARTH_RADIUS;
		s = Math.round(s * 10000) / 10000;
		return s;
	}

现在点击按钮看看效果：