高德地图API以案例学习3——线和面（折线、多边形、圆、椭圆、矩形）

上一篇介绍完了点（Marker）这篇介绍线和面，这里只介绍折线Polyline，而贝瑟尔曲线暂时不介绍

1.线Polyline,其实折线很简单，提供一个包含若干点的数组，设置为其属性即可，先来个最简单的案例：

<!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>线</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable :true,
				center:[116.397428, 39.90923],
				zoom:12
			});
			//设置线的路径点，线 将会从第一个点开始往后按顺序连起来
			var lines = [];
			lines.push([116.368904, 39.913423]);
			lines.push([116.382122, 39.901176]);
			lines.push([116.387271, 39.912501]);
			lines.push([116.398258, 39.904600]);
			//绘制线
			var polyLine = new AMap.Polyline({
				//折线的节点坐标数组
				path:lines,
				map:map
			});
		</script>
	</body>
</html>

2.折线的属性及方法

<!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>线</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable :true,
				center:[116.397428, 39.90923],
				zoom:12
			});
			//设置线的路径点，线 将会从第一个点开始往后按顺序连起来
			var lines = [];
			lines.push([116.368904, 39.913423]);
			lines.push([116.382122, 39.901176]);
			lines.push([116.387271, 39.912501]);
			lines.push([116.398258, 39.904600]);
			//绘制线
			var polyLine = new AMap.Polyline({
				//折线的节点坐标数组
				path:lines,
				map:map,
				strokeColor: "#00A",  //线颜色
        		strokeWeight: 4,      //线宽
//      		geodesic:true, //是否绘制成大地线 （大地线（Geodesic Lines）是指地球椭球面上两点间的最短程曲线）想看效果可以把第一个点经度改为 115
				isOutline:true, //线是否带描边，默认为false
//				borderWeight:3,  //描边宽度，默认为1
//				outlineColor:"#F00", //描边颜色
//				lineJoin:"bevel", //折线拐点的绘制样式  默认为尖角，round圆角，bevel斜角
//				lineCap:'round', //折线两端的样式，默认无样式，round圆头，square方头
//				draggable:true,  //折线是否可拖动，默认为false
//				showDir :true,   //是否沿路径显示箭头方向
				extData:{"id":"aa"}//设置自定义属性，支持js任意数据类型。
			});
			console.log(polyLine.getPath())//获取折线路径的节点数组
			console.log(polyLine.getLength())//获取折线总长度
			console.log(polyLine.getExtData().id)//获取自定义的属性
			console.log(polyLine.getBounds())//获取当前折线的矩形范围对象（构造一个矩形需要一个Bounds对象，其实就是一个西南坐标 + 东北坐标构成）
			//设置 点击地图使得该线隐藏，再点击又显示，如此反复
			var i = false;
			map.on('click',function(){
				if(i){
					polyLine.show();//显示
				}else{
					polyLine.hide();//隐藏
				}
				i=!i;
			})
		</script>
	</body>
</html>

3.多边形polygon,多边形的绘制方式跟折线一样，提供一个点数组即可

<!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>多边形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>

		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			
			var polygonArr = new Array();//多边形覆盖物节点坐标数组
		    polygonArr.push([116.403322, 39.920255]);
		    polygonArr.push([116.410703, 39.897555]);
		    polygonArr.push([116.402292, 39.892353]);
		    polygonArr.push([116.389846, 39.891365]);
		    
		    var polyGon = new AMap.Polygon({
		    	path:polygonArr, //这里我设的是一维数组，多边形参数可设二维数组，如果设置二维数组，将出现的是一个中间镂空的多边形（也就是官方所说的带洞多边形）
		    					//二维数组 [外圈多边形点数组,内圈多边形点数组]
		    	map:map
		    });
		</script>
	
	</body>
</html>

4.多边形的属性和方法介绍：

<!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>多边形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>

		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			
		    var polygonArr = new Array();//多边形覆盖物节点坐标数组
		    polygonArr.push([116.403322, 39.920255]);
		    polygonArr.push([116.410703, 39.897555]);
		    polygonArr.push([116.402292, 39.892353]);
		    polygonArr.push([116.389846, 39.891365]);
		    
		    var polyGon = new AMap.Polygon({
		    	path:polygonArr, //这里我设的是一维数组，多边形参数可设二维数组，如果设置二维数组，将出现的是一个中间镂空的多边形（也就是官方所说的带洞多边形）
		    					//二维数组 [外圈多边形点数组,内圈多边形点数组]
		    	map:map,
		    	bubble:true,//事件可穿透到地图上
		    	 strokeColor: "#3366FF", //线颜色
		        strokeOpacity: 1,       //线透明度
		        strokeWeight: 5,        //线宽
		        strokeStyle: "solid",   //线样式
		        strokeDasharray: [10, 5] //补充线样式
		    });
		    console.log(polyGon.getArea())//获取多边形面积
		    //其他一些基本的跟折线一样的属性 方法这里就不再介绍了，这里介绍一下contains方法
		    //判断指定点坐标是否在多边形范围内
		    //这里的案例因为我设置了bubble:true,因此我在点击多边形的时候事件可以穿透到地图上。
		    map.on('click',function(e){
		    	if(polyGon.contains(e.lnglat)){
		    		alert("您点击在多边形内");	
		    	}else{
		    		alert("您点击在多边形外");
		    	}
		    })
		</script>
	
	</body>
</html>

5.圆形circle,圆形是以圆心和半径确定一个圆的，圆形的属性和方法跟多边形大体类似，都是层叠顺序啊、获取圆心、半径，判断一个点是否在覆盖物内等等

<!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>圆形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			//圆形
			var circle = new AMap.Circle({
				radius: 2000, //半径
				center: [116.403322, 39.920255],// 圆心位置
				map:map
			});
		</script>
	</body>
</html>

6.椭圆，椭圆也是以圆心和半径确定一个椭圆，区别是椭圆的半径有两个，一个横向半径、一个纵向半径

<!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>椭圆形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			//椭圆
			var ellipse = new AMap.Ellipse({
				map:map,
				center: [116.403322, 39.920255],//圆心
				radius:[1000,2000]//半径，1000是横向半径，2000是纵向半径
			});
			
		</script>
	</body>
</html>

7.矩形，矩形的主要靠西南角的点和东北角的点来确定一个矩形(Bounds对象)

<!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>圆形</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
	<body>
		<div id="container">
		</div>
		
		<script type="text/javascript">
			var map = new AMap.Map("container",{
				resizeEnable:true,
				zoom:12,
				center:[116.397428, 39.90923]
			})
			//矩形  Rectangle
			var rectangle = new AMap.Rectangle({
				map:map,
				bounds:new AMap.Bounds([116.376533, 39.907878],[116.414124, 39.940799])//第一个为西南角点，第二个为东北角点
			});
			
		</script>
	</body>
</html>

高德地图API以案例学习3——线和面（折线、多边形、圆、椭圆、矩形）

继续阅读

[js]谷歌地图api和百度地图api的demo..

百度地图API之JavaScript开源库2 前言城市商圈及行政区域路书测距工具交通流量总结

【高德地图api】输入地点名称定位坐标，并放大地图级别

Android位置服务和Google地图API初解——名词解释

百度地图API自定义地图百度地图API自定义地图

【高德地图】解决地图正常显示但是控制台却报GET file://webapi.amap.com/ui/1.0/main.js net::ERR_FILE_NOT_FOUND

高德地图api之basic map UIsettings

百度地图JSAPI GL镂空多边形绘制

百度地图API（四）电子围栏—DrawingManager

利用高德地图获取经纬度-python

Android百度地图HelloWorld运行异常处理

使用百度地图接口实现自定义网页地图开发实现

BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取BaiduMap 鼠标绘制矩形选框四个顶角坐标的获取 1、博文产生原因 2、实现机制 3、结语 4、版权

微信小程序入门实例--地图

去除百度高德地图API左下角的logo

高德api 实现定位 marker 路线规划