实现输入。和开启绘图,禁止绘图。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=1.5&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {width: 100%; height:500px; overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<!--加载鼠标绘制工具-->
<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" />
<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 class="txt" type="text">
<input class="open" type="button" value="开启绘图" />
<input class="close" type="button" value="禁止绘图" />
</div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('map');
var poi = new BMap.Point(116.307852,40.057031);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
function closeMapDraw() {
alert(123);
// BMapLib.EventWrapper.clearListeners(map, 'click');
// map.removeEventListener("click");
//removeEventListener(event:String, handler:Function)
}
$(".open").click(function() {
var dCircleVal = $(".txt").val(); // Circle input text value 圆半径输入
radiusNum = parseInt(dCircleVal);
// alert("hah");
if (dCircleVal == "" || dCircleVal == null) {
// $("#dCircle .messWarn").text("请输入半径");
alert(23);
return;
}
else {
// $("#dCircle .messWarn").text("");
// $("#dialogAll").animate({
// margin: '0',
// top: '0',
// position: "fixed",
// padding: '0',
// left: '0'
// }, 1000);
// map.addEventListener("click",function(e){
// console.log(e.point.lng + "," + e.point.lat);
// showInfo(e,radiusNum);
// });
}
addClick();
});
$(".close").click(function(){
alert("ww");
removeClick();
});
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
function showInfo(e){
map.clearOverlays();
circlePoint = new BMap.Point(e.point.lng, e.point.lat); // 创建点坐标
var circle = new BMap.Circle(circlePoint, radiusNum, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5
}); //创建圆
map.addOverlay(circle); //增加圆
// return circlePoint;
// closeMapDraw();
}
function addClick(){
map.addEventListener("click", showInfo);
}
function removeClick(){
map.removeEventListener("click", showInfo);
}
</script>
</body>
</html>
**