百度地图API, 画圆型时可以收缩半径大小的功能

最新推荐文章于 2025-05-06 09:57:56 发布

原创最新推荐文章于 2025-05-06 09:57:56 发布

· 8.3k 阅读

6 ·

版权

文章标签：

#百度地图圆 #自定义百度地图圆大小

百度地图API 研究专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用百度地图API创建一个可交互的地图应用，重点在于通过拖动条实时调整地图上圆圈覆盖物的半径大小，并提供完整的HTML代码实现。

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>Document</title>

	<!-- 百度api 的秘钥 -->
	<script type="text/javascript" src="http://api.map.baidu.com/api 你的秘钥"></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" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";position: absolute}
	</style>
</head>
<body>
	<div id="allmap"></div>
</body>
	<script type="text/javascript">
		//创建地图
		var map = new BMap.Map("allmap");    
		// map.centerAndZoom(new BMap.Point(104.067923463,30.6799428454), 8);  // 设置中心点 中心点是四川成都
		var point = new BMap.Point(104.067923463,30.6599428454); // 设置中心点 中心点是四川成都
		map.centerAndZoom(point, 12);
		// 橙色的marker  这个是一个图 可以去看下
		var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(22, 25), {

		    offset: new BMap.Size(10, 25),

		    imageOffset: new BMap.Size(0, 0 - 10 * 30)

			});
		// 先把这个创建起来 因为下面会用到里面的属性 
		var marker;
		marker = new BMap.Marker(point,{icon: myIcon});// 创建标注
			map.addOverlay(marker); 
			marker.enableDragging(); //marker可拖拽

			var circle = new BMap.Circle(point,3000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});//设置覆盖物的参数，中心坐标，半径，颜色
			map.addOverlay(circle);//在地图上显示圆形覆盖物

	</script>
</html>

上面是基本的画圆方法现在看下可以自定义这个圆放大缩小

首先在上的html 上面加一个拖动条

<div class="process">
     <div class="process-bar"></div>
    <span class="bar" id="mybar"></span>
 </div>

在来获取下圆的半径和拖动圆的时候设置他的半径

现在直接上全码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>Document</title>

	<!-- 百度api 的秘钥 -->
	<script type="text/javascript" src="http://api.map.baidu.com/api你的秘钥"></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" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";position: absolute}

		/*拖动条的css*/
			 .process{
			 	margin-top: 10px;
	            position: relative;
	            width:300px;;
	            height: 10px;
	            background-color: #dddddd;
	            border-radius: 5px;
        	}
	        .process-bar{
	            width: 50%;
	            height: 10px;
	            background-color: #187aab;
	            border-radius: 5px;
	        }
	        .bar{
	            top: -5px;
	            left: calc( 50% - 5px);
	            position: absolute;
	            width: 10px;
	            height: 20px;
	            border-radius: 5px;
	            background-color: #91cdea;
	            display: inline-block;
	        }
	        #mybar:hover{
	        	cursor:pointer;
	        }
	</style>
</head>
<body>
	<div id="allmap"></div>
	<div class="process" style="position: absolute;right: 10px;top: 10px; ">
			 <div class="process-bar"></div>
			<span class="bar" id="mybar"></span>
   	</div>
</body>
	<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
	<script type="text/javascript">
		//创建地图
		var map = new BMap.Map("allmap");    
		// map.centerAndZoom(new BMap.Point(104.067923463,30.6799428454), 8);  // 设置中心点 中心点是四川成都
		var point = new BMap.Point(104.067923463,30.6599428454); // 设置中心点 中心点是四川成都
		map.centerAndZoom(point, 12);
		// 橙色的marker  这个是一个图 可以去看下
		var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(22, 25), {

		    offset: new BMap.Size(10, 25),

		    imageOffset: new BMap.Size(0, 0 - 10 * 30)

			});
		// 先把这个创建起来 因为下面会用到里面的属性 
		var marker;
		marker = new BMap.Marker(point,{icon: myIcon});// 创建标注
			map.addOverlay(marker); 
			marker.enableDragging(); //marker可拖拽

			var circle = new BMap.Circle(point,3000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});//设置覆盖物的参数，中心坐标，半径，颜色
			map.addOverlay(circle);//在地图上显示圆形覆盖物

			var e_Radius = circle.getRadius();



			// 拖动条变大变小事件
			var isDrag = false;
			var fullwidth = $(".process").width();
			var mouseX,left;
			$("#mybar").bind("mousedown", function (e) {
			    isDrag = true;
			    mouseX = e.clientX;
			    left = $(this).position().left;
			    // console.log(mouseX+" "+left);
			    return false;
			});

		    $(document).bind("mousemove", function (e) {
		        if(isDrag){
		            var mX = e.clientX;
		            var l = mX-mouseX+left;
		            if(l<-5){
		                l=-5;
		            }else if(l>fullwidth-5){
		                l=fullwidth-5;
		            }
		            $("#mybar").css('left',l);
		            
		            var	p = Math.round((l+5)*100/fullwidth);

		            $(".process-bar").css('width',p+'%');

		        	var t = e_Radius*p/50;
		        	circle.setRadius(t);


		           
		        }
		    });
		    $(document).bind("mouseup", function () {
		        isDrag = false;

		        return false;
		    });
	</script>
</html>

下面的是效果大家看下