js百度地图创建多个marker,多个label,监听缩放、拖拽

记录

记录使用到的一些百度API

监听地图缩放

map.addEventListener(“zoomend”, function(e){
var ZoomNum = map.getZoom();
console.log(ZoomNum)
})

监听地图拖拽(实时获取中心点)

map.addEventListener(“dragend”, function(e){
var center = map.getCenter();
var lat=center.lat;
var lng= center.lng;
})

地图放大按钮

$(".scal_imgadd").bind('click',function(){
	map.zoomTo(map.getZoom() + 1);
})

地图缩小按钮

$(".scal_img").bind('click',function(){
	map.zoomTo(map.getZoom() - 1);
})

向地图添加多个标记点

var map = new BMap.Map("container");    
var point = new BMap.Point(116.415, 39.931);  
map.centerAndZoom(point, 12);  
map.enableScrollWheelZoom(true);//启用滚轮放大缩小

var list = [
                {lat:39.841938,lng:116.25837,con:"我是C",title:"老三"},
                {lat:39.809815,lng:116.740079,con:"我是D",title:"老四"},
                {lat:39.93428,lng:116.37319,con:"我是E",title:"老五"}
            ];
function getInfo(){
	var point = new Array(); //存放标注点经纬信息的数组
	 var marker = new Array(); //存放标注点对象的数组
	for(var i = 0;i<list.length;i++){
		  var lng = list[i].lng;
		  var lat = list[i].lat;
		  var houseType = list[i].con;
		  var rentStr = list[i].title;
		  point[i] = new window.BMap.Point(lng, lat); //循环生成新的地图点
		  marker[i] = new window.BMap.Marker(point[i]);
		  map.addOverlay(marker[i]);
		  var label = new window.BMap.Label("<div style='font-size: 16px;'>" + houseType + "</div><p style='margin-top: 8px;font-size:16px;'>" + rentStr + "</p>", { offset: new window.BMap.Size(20, -10) });
		  label.setStyle({
			  border: 'none',
			  borderRadius:'10px',
			  backgroundColor: 'lightblue',
			  textAlign: 'center',
			  margin: '18px auto 0',
			  padding: '0',
			  display: 'block',
			  width: '60px',
			  color: '#FFFFFF'
		  });
		  label.aa = houseType;
		  label.bb = rentStr;
		  
		  marker[i].setLabel(label);
		  
		 label.addEventListener("click", function(e){
			//获取当前点击的信息
			 event.preventDefault();
			 console.log(this.aa,this.bb)
		
		});
	  }
}

在写多个标记点的时候特别感激该博主的分享
博主原文链接:https://blog.csdn.net/MR1269427885/article/details/45249081

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值