百度地图绘制多边形区域并获取范围坐标

最新推荐文章于 2024-05-22 21:54:15 发布

咯噔在这儿

最新推荐文章于 2024-05-22 21:54:15 发布

阅读量3k

点赞数 1

分类专栏：前端百度地图

本文链接：https://blog.csdn.net/Mjl_666/article/details/118188334

版权

百度地图API 绘制工具多边形坐标获取地图交互

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

百度地图

2 篇文章 0 订阅

订阅专栏

效果如图，随意绘制一个多边形，并且打印多边形每个点的坐标

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			body,html {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "微软雅黑";
			}
			#allmap {
				width: 100%;
				height: 500px;
				overflow: hidden;
			}

			#result {
				width: 100%;
				font-size: 12px;
			}
			dl,dt,dd,ul,li {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			p {font-size: 12px;}
			dt {
				font-size: 14px;
				font-family: "微软雅黑";
				font-weight: bold;
				border-bottom: 1px dotted #000;
				padding: 5px 0 5px 5px;
				margin: 5px 0;
			}
			dd {padding: 5px 0 0 5px;}
			li {line-height: 28px;}
		</style>
		<script src="http://api.map.baidu.com/api?api?v=3.0&ak=百度地图密钥"></script>
		<!--加载鼠标绘制工具-->
		<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
		<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
		<title>百度地图API功能演示</title>
	</head>
	<body>
		<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
			<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
			</div>
		</div>
		<div id="result">
			<input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)" />
			<input type="button" value="清除所有覆盖物" onclick="clearAll()" />
			<input type="button" value="获取多边形的顶点" onclick="getPoint()" /><br />
			<input type="button" value="开启线、面编辑功能" onclick="Editing('enable')" />
			<input type="button" value="关闭线、面编辑功能" onclick="Editing('disable')" />
			<input type="button" value="画多边形" onclick="draw(BMAP_DRAWING_POLYGON)" />
			<input type="button" value="画矩形" onclick="draw(BMAP_DRAWING_RECTANGLE)" />
		</div>
		<div id="resultShape"></div>
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			// 百度地图API功能
			var map = new BMap.Map('map');
			var poi = new BMap.Point(113.948913, 22.530844);
			map.centerAndZoom(poi, 16);
			map.enableScrollWheelZoom();
			var overlays = [];
			var overlaycomplete = function(e) {
				overlays.push(e.overlay);
			};
			var styleOptions = {
				strokeColor: "red", //边线颜色。
				fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
				strokeWeight: 3, //边线的宽度，以像素为单位。
				strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
				fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
				strokeStyle: 'solid' //边线的样式，solid或dashed。
			}
			//实例化鼠标绘制工具
			var drawingManager = new BMapLib.DrawingManager(map, {
				isOpen: false, //是否开启绘制模式
				// enableDrawingTool: true, //是否显示工具栏
				drawingToolOptions: {
					anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
					offset: new BMap.Size(5, 5), //偏离值
				},
				circleOptions: styleOptions, //圆的样式
				polylineOptions: styleOptions, //线的样式
				polygonOptions: styleOptions, //多边形的样式
				rectangleOptions: styleOptions //矩形的样式
			});
			//添加鼠标绘制工具监听事件，用于获取绘制结果
			drawingManager.addEventListener('overlaycomplete', overlaycomplete);
			
			function draw(type) {
				drawingManager.open();
				drawingManager.setDrawingMode(type);
			}
			function clearAll() {
				for (var i = 0; i < overlays.length; i++) {
					map.removeOverlay(overlays[i]);
				}
				overlays.length = 0
			}
			function getPoint() {
				$("resultShape").innerHTML = '';
				for (var i = 0; i < overlays.length; i++) {
					var overlay = overlays[i].getPath();
					$("resultShape").innerHTML = $("resultShape").innerHTML + overlay.length + '边形:<br/>';
					for (var j = 0; j < overlay.length; j++) {
						var grid = overlay[j];
						$("resultShape").innerHTML = $("resultShape").innerHTML + (j + 1) + "个点:(" + grid.lng + "," + grid.lat +");<br/>";
					}
				}
			}
			function Editing(state) {
				for (var i = 0; i < overlays.length; i++) {
					state == 'enable' ? overlays[i].enableEditing():overlays[i].disableEditing();
				}
			}		
		</script>
	</body>
</html>

咯噔在这儿

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
百度地图绘制多边形区域并获取范围坐标

效果如图，随意绘制一个多边形，并且打印多边形每个点的坐标<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="te
复制链接

扫一扫