百度地图多边形编辑功能

最新推荐文章于 2024-04-01 10:37:26 发布

可爱到爆炸

最新推荐文章于 2024-04-01 10:37:26 发布

阅读量2.2k

点赞数 1

分类专栏：成长文章标签：百度地图 js 前端

本文链接：https://blog.csdn.net/qq_38618241/article/details/98030086

版权

成长专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用百度地图API实现多边形编辑功能，包括根据返回点在地图上编辑和删除多边形，提供了详细的HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图多边形编辑功能

此功能包括根据回台的返回点回显在地图上编辑，删除，下面直接上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>地图显示</title>
		<style type="text/css">
			body,
			html {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			/* 去除logo */
				.BMap_cpyCtrl {
					display: none;
				}
				
				.anchorBL {
					display: none;
				}
			#allmap {
				height: 100vh;
				overflow: hidden;
			}
			#map{
				height: calc(100% - 80px);
			}
			#result {
				width: 100%;
				font-size: 12px;
				text-align: center;
				padding-top: 25px;
			}

			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;
			}
			input[type=button]{
				padding: 6px 12px;
				border: none;
				color: #fff;
				border-radius:5px ;
				background-color: #006AFC;
				cursor: pointer;
				margin-right: 20px;
			}
			input[type=button]:hover{
				background-color: #0062A7;
			}
		</style>
	</head>
	<body>

		<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
			<div id="map" style="-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
			<div id="result">
				<!-- <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)" /> -->
				<input type="button" value="清除所有覆盖物" onclick="clearAll()" />
				
				<input type="button" value="开启面编辑功能" onclick = "Editing('enable')"/>
				<input type="button" value="关闭面编辑功能" onclick = "Editing('disable')"/>
				<input type="button" value="保存坐标" onclick="getpoint()" />
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/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" />
		<!--加载检索信息窗口-->
		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
		<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
		<script type="text/javascript">
			// 百度地图API功能
			var map;
			var pointdata = []; //返回的坐标点
			var overlays = [];
			var polygon   //初始化
			nadata = [
				new BMap.Point(116.387112,39.920977),
				new BMap.Point(116.385243,39.913063),
				new BMap.Point(116.394226,39.917988),
				new BMap.Point(116.401772,39.921364),
				new BMap.Point(116.41248,39.927893)
			]
			//ajax调用
			createMap([116.307852,40.057031],nadata);
			
		function createMap(points,na){
			map = new BMap.Map('map',{ enableMapClick: false });
						// 百度地图API功能
			 var poi = new BMap.Point(points[0],points[1]);
			 map.centerAndZoom(poi, 12);//设置中心点坐标和地图级别
			 map.enableScrollWheelZoom(); //启用鼠标滚动对地图放大缩小
			 
			 
			 
			//鼠标绘制完成回调方法   获取各个点的经纬度
			 var overlaycomplete = function(e){
			     overlays.push(e.overlay);
				 
			     var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
				  console.log(overlays)
				 console.log(path)
				 for(var i=0;i<path.length;i++){
						pointdata.push({"lng":path[i].lng,"lat":path[i].lat})
			     }
			 };
			 var styleOptions = {
			     strokeColor:"red",    //边线颜色。
			     fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
			     strokeWeight: 3,       //边线的宽度，以像素为单位。
			     strokeOpacity: 0.8,       //边线透明度，取值范围0 - 1。
			     fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
			     strokeStyle: 'solid' //边线的样式，solid或dashed。
			 }
			 //后台出入坐标点 判断是否有回显坐标点
			 if(na){
				  polygon = new BMap.Polygon(na, styleOptions);  //创建多边形
				 map.addOverlay(polygon);   //增加多边形
				  overlays = map.getOverlays();  // 获取坐标点
			 }
			 
			  
			 // overlays = new BMap.Polygon([
			 // 	new BMap.Point(116.387112,39.920977),
			 // 	new BMap.Point(116.385243,39.913063),
			 // 	new BMap.Point(116.394226,39.917988),
			 // 	new BMap.Point(116.401772,39.921364),
			 // 	new BMap.Point(116.41248,39.927893)
			 // ], styleOptions);  //创建多边形
			 // map.addOverlay(overlays);   //增加多边形
			 
			 //实例化鼠标绘制工具
			 var drawingManager = new BMapLib.DrawingManager(map, {
			     isOpen: false, //是否开启绘制模式
			     enableDrawingTool: true, //是否显示工具栏
			     drawingMode:BMAP_DRAWING_POLYGON,//绘制模式  多边形
			     drawingToolOptions: {
			         anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
			         offset: new BMap.Size(5, 5), //偏离值
			         drawingModes:[
			             BMAP_DRAWING_POLYGON
			         ]
			     },
			     polygonOptions: styleOptions //多边形的样式
			 });
			 
			  //添加鼠标绘制工具监听事件，用于获取绘制结果
			 drawingManager.addEventListener('overlaycomplete', overlaycomplete);
		}
			 
    
	function clearAll() {
        for(var i = 0; i < overlays.length; i++){
			console.log(overlays[i])
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0 ;
		pointdata=[];
    }
	//开启线、面编辑功能enable  //关闭线、面编辑功能disable
function Editing(state){  
    for(var i = 0; i < overlays.length; i++){  
        state=='enable'?overlays[i].enableEditing():overlays[i].disableEditing();  
    }  
}
	//保存坐标
	function getpoint(){
		console.log(overlays)
		for(var item of overlays){
           var path = item.getPath();
           for(var i=0;i<path.length;i++){
           		pointdata.push({"lng":path[i].lng,"lat":path[i].lat})
           }
       }
		console.log(pointdata)
			//这里可以写回调 返回坐标点
	}
			
		</script>
	</body>

</html>

效果
在这里插入图片描述