0
点赞
收藏
分享

微信扫一扫

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


想要实现这样的功能

用户在网页上画出一个矩形,点击交通态势按钮就能得到相关的交通信息。

当用户用鼠标画矩形,按下鼠标时,记录下矩形对角线的一个顶点的坐标,放下鼠标时,记录下矩形另一个顶点的坐标。然后经过比较处理,保证传给HTTP接口的参数是左下右上的点的坐标。

可以清除现有数据,重新查看交通路况。如果所画的区域没有数据,会出现相应的红色字体提示。

如图:

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

做法

利用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/SimpleTools/tree/master/travelSystem


举报

相关推荐

0 条评论