【github travelSystem】高德JS API + WEB API 矩形区域交通态势

来源：互联网发布：域名不以封疆之界编辑：程序博客网时间：2024/05/20 05:08

想要实现这样的功能

用户在网页上画出一个矩形，点击交通态势按钮就能得到相关的交通信息。
当用户用鼠标画矩形，按下鼠标时，记录下矩形对角线的一个顶点的坐标，放下鼠标时，记录下矩形另一个顶点的坐标。然后经过比较处理，保证传给HTTP接口的参数是左下右上的点的坐标。
可以清除现有数据，重新查看交通路况。如果所画的区域没有数据，会出现相应的红色字体提示。
如图：
这里写图片描述

做法

利用jquery.getjson来获取结果，解析json。将结果呈现出来。
相关学习网址：http://api.jquery.com/jquery.getjson/
设置input text是readonly属性，这样只能通过代码来设置数值，用户不能自己修改。
因为接口支持的城市是有限的，所以这里就直接设置地图城市为北京。
用mousetool.rectangle()在网页上画矩形，AMap.event.addListener( mapObj, ‘mousedown’, function(e){})和AMap.event.addListener( mapObj, ‘mouseup’, function(e){})来记录画矩形时顶点的坐标。
故，这里同时用到了JS API（地图显示、画矩形、鼠标监听）和WEB API（HTTP接口）。
注：下面代码中的“您申请的key”不是一样的，分别填写自己的JS API key 和WEB API key。

具体代码

<!doctype html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">    <title>transpotion-rectangle</title>    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key"></script>    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    <style type="text/css">    #result {    color: #333;    padding: 6px;    border: 1px solid silver;    box-shadow: 3px 4px 3px 0px silver;    position: absolute;    background-color: #eee;    top: 200px;    right: 10px;    border-radius: 5px;    overflow: hidden;    line-height: 20px;    }      #button {        color: #333;        padding: 6px;        border: 1px solid silver;        box-shadow: 3px 4px 3px 0px silver;        position: absolute;        background-color: #eee;        top: 500px;        left: 10px;        border-radius: 5px;        overflow: hidden;        line-height: 20px;    }    #point {        color: #333;        padding: 6px;        border: 1px solid silver;        box-shadow: 3px 4px 3px 0px silver;        position: absolute;        background-color: #eee;        top: 500px;        right: 10px;        border-radius: 5px;        overflow: hidden;        line-height: 20px;    }    </style></head><body><div id="container"></div><div id = "result" style="line-height: 24px"> </div><div id="point">x1:<input type="text" id="x1" value="" readonly='true'>y1:<input type="text" id="y1" value="" readonly='true'><br>x2:<input type="text" id="x2" value="" readonly='true'>y2:<input type="text" id="y2" value="" readonly='true'></div> <script language="javascript">    var mapObj = new AMap.Map("container",{        resizeEnable: true,        zoom:11,        center: [116.397428, 39.90923]     });        mapObj.plugin(["AMap.ToolBar"],function(){             toolBar = new AMap.ToolBar();        mapObj.addControl(toolBar);        });    var mousetool;    mapObj.plugin(["AMap.MouseTool"],function(){         mousetool = new AMap.MouseTool(mapObj);     });    mousetool.rectangle({map:mapObj});     AMap.event.addListener( mapObj, 'mousedown', function(e){    document.getElementById('x1').value = e.lnglat.getLng();    document.getElementById('y1').value = e.lnglat.getLat();    });    AMap.event.addListener( mapObj, 'mouseup', function(e){    document.getElementById('x2').value = e.lnglat.getLng();    document.getElementById('y2').value = e.lnglat.getLat();    });    function check() {        var x1 = document.getElementById('x1').value;        var y1 = document.getElementById('y1').value;        var x2 = document.getElementById('x2').value;        var y2 = document.getElementById('y2').value;        var API = "http://restapi.amap.com/v3/traffic/status/rectangle?rectangle=";        var p1x = x1<x2?x1:x2;        var p2x = x1>x2?x1:x2;        var p1y = y1<y2?y1:y2;        var p2y = y1>y2?y1:y2;        API = API+p1x+','+p1y+';'+p2x+','+p2y;   // 矩形的左下右上坐标点 p1.x < p2.x and p1.y < p2.y        API = API+"&key=您申请的key";        $.getJSON(API, { })         .done(function(data){            if(data.status == '0'){                document.getElementById('result').innerHTML = "<font color='red'><b>抱歉，我们无法获得这片区域的路况数据</b></font>";                return ;            }            var subData = data.trafficinfo;            var descStr = subData.description;       // 路况综述            var evaluation = subData.evaluation;            var congested = evaluation.congested;    // 拥堵百分比            var evaluStr = evaluation.description;   // 道路描述            var expedite = evaluation.expedite;      //  畅通百分比            var status = evaluation.status;          //  路况            var str = '路况综述<br>'+ descStr + '<br>' + '拥堵百分比: '+ congested + '<br>';            str = str + '道路描述: ' + evaluStr + '<br>';            str = str + '畅通百分比: ' + expedite + '<br>';            var statusStr;            switch(status){              case '0':              statusStr = '未知';              break;              case '1':              statusStr = '畅通';              break;              case '2':              statusStr = '缓行';              break;              case '3':              statusStr = '拥堵';              break;            }            str = str + '路况: ' + statusStr + '<br>';            document.getElementById('result').innerHTML = "<b>" + str + "</b>";        });    }    function myclear(){        window.location.reload();   // 已经画好的矩形除非是关闭画矩形操作，或者刷新页面，否则已有的矩形不会消失。        document.getElementById('x1').value = '';        document.getElementById('y1').value = '';        document.getElementById('x2').value = '';        document.getElementById('y2').value = '';        document.getElementById('result').innerHTML = "";    }</script><div id="button"><button onclick="check()" id="button1">矩形区域交通态势</button><br><button onclick="myclear()" id="button2">清除现有矩形及数据</button></div></BODY></HTML>

工程地址：https://github.com/theArcticOcean/travelSystem

0 0