首页 > 其他分享> > 百度离线地图—绘制多边形（三）

百度离线地图—绘制多边形（三）

2021-11-30 09:06:57 作者：互联网

<!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:900px; overflow: hidden;}
	#result {width:100%;font-size:12px;}
	dl,dt,dd,ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	</style>
	 <link rel="stylesheet" href="./css/DrawingManager_min.css" />
	<script type="text/javascript" src="./map_load.js"></script>
	<script type="text/javascript" src="./js/DrawingManager_min.js"></script>
	
	<title>鼠标绘制多边形工具</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="drawPolygon(BMAP_DRAWING_POLYGON)"/>
		<input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>
		<input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
	</div>
	<script type="text/javascript">
	var drawingManager = null;
	var map = null;
	loadMap();
	var overlays = [];
	// 百度地图API功能
	function loadMap(){
		map = new BMap.Map("map",{minZoom:10,maxZoom:11});
		var point = new BMap.Point(117.212403,39.095359);  // 创建点坐标121.450933,30.790778  
		map.centerAndZoom(point, 11);
		map.enableScrollWheelZoom();  
	    drawingManager = null;
		map.addControl(new BMap.MapTypeControl({//添加地图类型控件
		mapTypes:[
			BMAP_NORMAL_MAP,
			BMAP_HYBRID_MAP
		]}));	
		var overlaycomplete = function(e){
			overlays.push(e.overlay);
			for (var i = 0; i < overlays.length; i++) {
				overlays[i].enableEditing();
			}
			alert("绘制完成事件");
		};

		var styleOptions = {
			strokeColor: "red",    //边线颜色。
			fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight: 3,       //边线的宽度，以像素为单位。
			strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
			fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
			strokeStyle: 'solid' //边线的样式，solid或dashed。
		}

		//实例化鼠标绘制工具
		drawingManager = new BMapLib.DrawingManager(map, {
			isOpen: false, //是否开启绘制模式
			enableDrawingTool: true, //是否显示工具栏
			drawingToolOptions: {
				drawingModes:[BMAP_DRAWING_POLYGON],
				anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
				offset: new BMap.Size(95, 10) //偏离值
			},
			polygonOptions: styleOptions //多边形的样式
		});
		drawingManager.addEventListener('overlaycomplete', overlaycomplete);
	}
    function clearAll() {
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0   
    }
	function drawPolygon (type){
		drawingManager.open(); 
		drawingManager.setDrawingMode(type);
	}
</script>
</body>
</html>

百度网盘下载：https://pan.baidu.com/s/1g0odFslmo1bHC8DK5Amd_A 提取码: i9ku

标签：map,多边形,100%,离线,drawingManager,var,new,overlays,百度
来源： https://blog.csdn.net/yb305/article/details/121624346