百度地图封装实现拉框效果

最新推荐文章于 2020-06-19 15:15:29 发布

风云正

最新推荐文章于 2020-06-19 15:15:29 发布

阅读量707

点赞数

分类专栏：地图文章标签：百度地图拉框

地图专栏收录该内容

16 篇文章

订阅专栏

最近要做一个百度地图的拉框效果，仔细一查，百度地图竟然已经封装好了，兴奋了一下，问题来了，百度实现的是拉框搜索，而我要做的却不是这样的功能，唉，又看不懂百度的源码，只好发挥一下自己的聪明才智自己封装一下。

拉框.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拉框</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
<input type="button" onclick="openbut()" value="开启"/>
<input type="button" onclick="closebut()" value="关闭"/>
<div style="width:1200px;height:570px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");      //设置卫星图为底图
var point1 = new BMap.Point(117.263865,34.151257);
map.centerAndZoom(point1,15);//设定地图的中心点和坐标并将地图显示在地图容器中
map.addControl(new BMap.NavigationControl());      //为地图添加鱼骨  
map.enableScrollWheelZoom();//启用地图滚轮放大缩
var dflag="0";
var sflag="0";
var a1="";
var b1="";
var a2="";
var b2="";
var polygon="";
function openbut(){
	dflag="1";
}
map.addEventListener("click", function(e){ 
	if(sflag=="1"){
		dflag="0";
		return;
	}	  
	if(dflag=="1"){
		a1=e.point.lng;
		b1=e.point.lat;
		beginMove();
	} 
	 
}); 


function beginMove(){
	map.addEventListener("mousemove", function(e){ 
		if(dflag=="1"){
			if(polygon!=""){
				map.removeOverlay(polygon);
				polygon="";
			}
			a2=e.point.lng;
			b2=e.point.lat;
			polygon = new BMap.Polygon([
			  new BMap.Point(a1,b1),
			  new BMap.Point(a2,b1),
			  new BMap.Point(a2,b2),
			  new BMap.Point(a1,b2)
			], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
			map.addOverlay(polygon);
			sflag="1";
		} 
	});	
}
</script>