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

最新推荐文章于 2024-01-07 22:32:26 发布

theArcticOcean

最新推荐文章于 2024-01-07 22:32:26 发布

阅读量3.5k

点赞数 1

分类专栏： javascript 文章标签：交通 web api 鼠标高德地图

本文链接：https://blog.csdn.net/theArcticOcean/article/details/68950692

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

想要实现这样的功能

用户在网页上画出一个矩形，点击交通态势按钮就能得到相关的交通信息。
当用户用鼠标画矩形，按下鼠标时，记录下矩形对角线的一个顶点的坐标，放下鼠标时，记录下矩形另一个顶点的坐标。然后经过比较处理，保证传给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/SimpleTools/tree/master/travelSystem

theArcticOcean

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【github travelSystem】高德JS API + WEB API 矩形区域交通态势

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

扫一扫