现在地铁这么多,确实方便了出行,但是到达一个陌生地方时,找到最近的地铁站还是有点迷茫的。网上已经有一些查找最近地铁站的应用,特别是手机应用,但是对于怎么实现的却一知半解,这篇文章就来一探究竟。
这里通过Google地图的API来实现查找指定地点附近的地铁站的功能,首先准备好全部可以查询的地铁站,然后通过google map解析出来地铁站和指定地点的坐标,然后计算指定地点和每个地铁站的距离,如果距离在五公里之内就在地图上标注出来。
原理就是这么简单,下边看看怎么实现:
以天安门广场上的人民英雄纪念碑为指定中心点。
1、准备好可以查询的地铁站
为了便于处理,这里准备了十几个地铁站作演示,并放到一个数组里边。
var arrAddr=['天安门西地铁站','天安门东地铁站','西单地铁站','东单地铁站','王府井地铁站','前门地铁站','宣武门地铁站','复兴门地铁站','国贸地铁站','东直门地铁站','三元桥地铁站','动物园地铁站','五棵松地铁站'];
2、初始化google maps
引入google maps api,在页面的头部加入javascript文件的引用:
设置初始化参数、显示区域等:
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、计算指定地点和每个地铁站的距离
为了更直观的显示,这里通过一个按钮来触发。
// 查找地铁站
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公里之内的。
这篇文章只是做了一个简单的演示,很多细节和功能可以完善的地方没有涉及,有兴趣的朋友可以自己试试。