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

2021-11-30 09:06:57 阅读：296 来源： 互联网

标签：map 多边形 100% 离线 drawingManager var new overlays 百度

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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