波斯码BOSSMA Information Technology

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

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

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

这里通过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;
	}

现在点击按钮看看效果:

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

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

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

关键字:

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

目前有2 条评论

  1. jxdyzwh 沙发:

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

发表评论