<!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>
下面的是效果 大家看下
您要是感觉有用请支持下 这个写了好久