关于选择聚会地点的软件

关于设计选择聚会地点软件的想法

前几天,偶然听小伙伴提出这个想法,感觉很有意思就打算研究一下.也可以顺便练习一下.

第一版百度地图API+经纬度计算出中心点周边的地铁站

先申请百度地图 API的KEY
思路,获取输入的地铁站的经纬度,然后计算出多个地铁站的中心点的经纬度,获取附近最近的地铁站

代码如下
index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #l-map{height:400px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
    <title>关键字输入</title>
</head>
<body>
    <div id="l-map"></div>
    <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="" style="width:150px;" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <button type="button" id="calc">计算中间点</button>
    <table id="tblGrid" style="table-layout:fixed">
        <tr>
        <td width="250px">地址</td>
        <td width="150px">经度</td>
        <td width="150px">纬度</td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map"); 
    // 百度坐标系坐标(地图中需要使用这个)
    var bPoints = new Array();
    map.centerAndZoom("广州",12);                   // 初始化地图,设置城市和地图级别。
    map.enableScrollWheelZoom(true);

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
        ,"location" : map
    });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        
        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        //alert("onhighlight");
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;  
        //alert("onconfirm");      
        setPlace();
    });

    function setPlace(){
        //map.clearOverlays();    //清除地图上所有覆盖物
        function showInfo(e) {
            alert(e.point.lng+","+e.point.lat);
        }
        function myFun(){
            if(confirm('确认要将该地点纳入路线图吗？')) {
                var current = local.getResults().getPoi(0);
                console.log(current);
                var point = {};
                if (typeof(current) == "object" && current.title !="") {
                    // point.name = current.title;
                    point.name = myValue;
                } 
                var pp = current.point;    //获取第一个智能搜索的结果
                console.log(pp);
                point.lng = pp.lng;
                point.lat = pp.lat;
                console.log(point);
                bPoints.push(point); // 添加到百度坐标数组 用于自动调整缩放级别

                //如果选中了，可以考虑将此地址以及坐标保存起来。
                var newRow = document.all("tblGrid").insertRow();
                //得到表的对象并插入一行，下面是插入了行以后，填充相应的列节点，如下面所示
                var oCell = newRow.insertCell();//插入列的节点
                oCell.innerHTML = point.name;//列里面填充的值，innerHtml值列内的所有元素    
                oCell = newRow.insertCell();
                oCell.innerHTML = point.lng; 
                oCell = newRow.insertCell();
                oCell.innerHTML = point.lat;

                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
                //添加文本标注
                var opts = {position:pp,offset:new BMap.Size(10,-30)};
                var label = new BMap.Label(current.title, opts);
                label.setStyle({
                    color:"red",
                    fontSize:"12px",
                    height:"20px",
                    lineheight:"20px",
                    fontFamily:"微软雅黑"
                });
                map.addOverlay(label);
                // map.addEventListener('click',showInfo);
            }
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: myFun
        });
        local.search(myValue);
    }

    // 根据点的数组自动调整缩放级别
    function setZoom(bPoints) {
        var view = map.getViewport(eval(bPoints));
        var mapZoom = view.zoom;
        var centerPoint = view.center;
        map.centerAndZoom(centerPoint, mapZoom);
    }

    document.getElementById('calc').onclick = function () {  
        var tab=document.getElementById("tblGrid");
        var rows=tab.rows;
        var totallng =0,totallat=0;
        for(var i=1;i<rows.length;i++)//遍历表格的行
        { 
            var a =rows[i].cells[1].innerHTML;
            totallng = Number(totallng) + Number(rows[i].cells[1].innerHTML);
            totallat = Number(totallat) + Number(rows[i].cells[2].innerHTML);
        }
        var point = new BMap.Point(Number(totallng) / Number(Number(rows.length)-1),Number(totallat) / Number(Number(rows.length)-1));
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.panTo(point);
        var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search("地铁站");
    }  

    setTimeout(function () {
        setZoom(bPoints);
    }, 1000)
</script>

第二版广州地铁API

通过调用API接口获得全部站点数据

接口

1	`https://app.gzmtr.cn:7400//line/qryStages?callback=&_=`

数据格式如下

{
    "stateId": 0,
    "data": [
        {
            "number": 1,
            "lineRelateId": "001",
            "lineNo": "1",
            "lineCn": "一号线",
            "lineEn": "Line 1",
            "color": "edcf3dff",
            "averageIntervalTime": 450,
            "lastModifyTime": 1482485159,
            "version": 22646,
            "status": 1,
            "lineOrder": 1,
            "stations": [
                {
                    "lineNo": "1",
                    "stationId": 1,
                    "stationRelateId": "00101",
                    "stageseq": "01",
                    "nameCn": "西塱",
                    "nameEn": "Xilang"
                },
                {
                    "lineNo": "1",
                    "stationId": 3,
                    "stationRelateId": "00102",
                    "stageseq": "02",
                    "nameCn": "坑口",
                    "nameEn": "Kengkou"
                }
            ]
        }
    ]
}

通过调用接口获得两个站点之间的通勤时间,费用

接口地址

1
2
3

http://cs.gzmtr.com/base/doSearchPathLine.do?callback=&startStation=%25E4%25BD%2593%25E8%2582%25B2%25E4%25B8%25AD%25E5%25BF%2583&endStation=%25E9%25A6%2599%25E9%259B%25AA&startId=&endId=&_=
// startStation为起始站点的两次uri编码
// endStation为终点站点的两次uri编码

数据类型如下

{
    "count": 15,
    "spendTime": "52",
    "lines": [
        {
            "lineName": "一号线",
            "stationName": "体育中心",
            "stationCode": "115"
        },
        {
            "lineName": "三北线",
            "stationName": "广州东站",
            "stationCode": "318"
        },
        {
            "lineName": "六号线",
            "stationName": "燕塘",
            "stationCode": "620"
        },
        {
            "stationName": "香雪",
            "stationCode": "632"
        }
    ],
    "price": 7,
    "stations": [
        {
            "endtime": "23:22",
            "linecode": "1",
            "starttime": "6:22",
            "endstage": "广州东站",
            "lineid": "1",
            "startstage": "体育中心",
            "sgk": "101"
        },
        {
            "endtime": "23:32",
            "linecode": "1",
            "starttime": "6:12",
            "endstage": "西朗",
            "lineid": "1",
            "startstage": "体育中心",
            "sgk": "101"
        }
    ]
}