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

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以在高德地图Marker对象中添加鼠标事件监听器,来实现鼠标移入显示label详细信息的功能。具体的实现步骤如下: 1. 创建Marker对象时,设置label属性为一个AMap.Text对象,用于显示详细信息。 ```javascript var marker = new AMap.Marker({ position: [lng, lat], label: { content: '详细信息', offset: new AMap.Pixel(0, -20) // 设置label偏移量,使其显示在Marker上方 } }); ``` 2. 给Marker对象添加mouseover和mouseout事件监听器,在鼠标移入和移出时显示或隐藏label。 ```javascript marker.on('mouseover', function (e) { marker.setLabel({ content: '详细信息', offset: new AMap.Pixel(0, -20), visible: true // 显示label }); }); marker.on('mouseout', function (e) { marker.setLabel({ visible: false // 隐藏label }); }); ``` 完整的代码示例: ```javascript var map = new AMap.Map('container', { zoom: 13, center: [116.397428, 39.90923] }); var markers = [ {lnglat: [116.405285, 39.904989], info: '北京市'}, {lnglat: [121.472644, 31.231706], info: '上海市'}, {lnglat: [113.280637, 23.125178], info: '广州市'}, {lnglat: [114.066112, 22.548515], info: '深圳市'} ]; for (var i = 0; i < markers.length; i++) { var marker = new AMap.Marker({ position: markers[i].lnglat, label: { content: markers[i].info, offset: new AMap.Pixel(0, -20) } }); marker.on('mouseover', function (e) { marker.setLabel({ content: e.target.getExtData().info, offset: new AMap.Pixel(0, -20), visible: true }); }); marker.on('mouseout', function (e) { marker.setLabel({ visible: false }); }); marker.setExtData(markers[i]); // 将详细信息存储在Marker对象的扩展数据中 marker.setMap(map); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值