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

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

本文介绍如何结合高德JS API和Web API，实现在网页上画矩形并获取该区域的交通信息。用户通过鼠标操作画出矩形，点击按钮获取交通态势。内容包括记录鼠标坐标、确保参数正确、处理无数据情况以及利用jQuery.getJSON获取和展示数据。示例代码展示了具体实现步骤，并提供GitHub工程链接。

摘要由CSDN通过智能技术生成

想要实现这样的功能

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