百度地图--圆形、矩形、多边形框选工具

山鬼taro

已于 2022-05-05 13:29:38 修改

阅读量1.8k

点赞数

分类专栏： # vue地图百度地图文章标签：前端

于 2021-09-27 13:18:52 首次发布

本文链接：https://blog.csdn.net/sinat_36359516/article/details/120506429

版权

百度地图同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

vue地图

5 篇文章 2 订阅

订阅专栏

以下代码可以贴进官方在线demo直接测试
百度地图官方在线测试：https://lbsyun.baidu.com/jsdemo.htm#c2_2

<!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,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#l-map{height:500px;width:100%;}
		#r-result{width:100%;}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  <script type="text/javascript" src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  <script type="text/javascript" src="//api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
	<title>设置点是否可拖拽</title>
</head>
<body>
	<div id="l-map"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("l-map");
  	var a = 116.400244;
	var b = 39.92556;
	var point = new BMap.Point(a,b);
	map.centerAndZoom(point, 9);
    var points = new Array(10);

	 for(var i =0;i<10;i++){
		var new_point = new BMap.Point(a+i*0.1,b+i*0.1);
		points[i] = new_point; 
		var marker = new BMap.Marker(new_point);  // 创建标注
		map.addOverlay(marker);              // 将标注添加到地图中  
	}	
  
	/*///*/
	var overlays = [];
	var num = 0;
	var recnum=0;
	var polynum=0;
	var overlaycomplete = function(e){//画完之后的回掉函数
		cirnum = 0;
		recnum=0;
		polynum=0;
        overlays.push(e.overlay);
		//计算矩形比较特殊（矩形可以用多边形的方法）
		var pStart = e.overlay.getPath()[3];//矩形左上角坐标
        var pEnd = e.overlay.getPath()[1];//矩形右上角坐标
		var pt1 = new BMap.Point(pStart.lng, pStart.lat); //3象限       
        var pt2 = new BMap.Point(pEnd.lng, pEnd.lat); //1象限           
		var bds = new BMap.Bounds(pt1, pt2); //范围   
      
		for(var i = 0;i<points.length;i++){	
			if(BMapLib.GeoUtils.isPointInCircle(points[i],e.overlay)){
				cirnum++;
			}
			if(BMapLib.GeoUtils.isPointInRect(points[i],bds)){
				recnum++;
			}
			if(BMapLib.GeoUtils.isPointInPolygon(points[i],e.overlay)){
				polynum++;
			}
		}
		alert('圆'+cirnum+'矩形'+recnum+'多边形'+polynum);
    };
    var styleOptions = {
        strokeColor:"blue",    //边线颜色。
        fillColor:"white",      //填充颜色。当参数为空时，圆形将没有填充效果。
        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);	
</script>

山鬼taro

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
百度地图--圆形、矩形、多边形框选工具

以下代码可以贴进官方在线demo直接测试百度地图官方在线测试：https://lbsyun.baidu.com/jsdemo.htm#c2_2<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user
复制链接

扫一扫