百度地图添加标注及图标拖拽及给标注添加右键

功能要求:拖动地图上的图钉时,在某个位置进行标注。并给标注添加右键操作属性。

【1】图标拖拽事件

var myIcon = new BMap.Icon("${ctx }/images/map_marker.png", new BMap.Size(40,40));
var marker2 = new BMap.Marker(point,{icon:myIcon});  // 创建标注
map.addOverlay(marker2);
marker2.enableDragging();
marker2.addEventListener("dragend", function (e) {
     alertMsg.confirm("要在该点添加新的标注吗?",{ okCall:function(){
          addPoint(e.point.lng,e.point.lat);
     }});
});

【2】给标注添加右键属性

//将后台获取到的坐标信息进行标注并添加右键属性事件。
function configMark(result) {
		var marks = result;
		var marker,infoWindow,editMarker,removeMarker,markerMenu,icon;
		var linePoints = []; //点坐标集合
		var transedPoints = []; //百度地图坐标转换每次只能转10个,所以需要分批次转换

		for ( var i = 0; i < marks.length; i++) {
			var love = marks[i];
			linePoints.push(new BMap.Point(love.bdCoorlng, love.bdCoorlat));
			marker = new BMap.Marker(new BMap.Point(love.bdCoorlng, love.bdCoorlat));
			if (love.isCheck == 0){
				icon = new BMap.Icon("${ctx }/images/red.png", new BMap.Size(30, 30)); //显示图标
			} else {
				icon = new BMap.Icon("${ctx }/images/green.png", new BMap.Size(30, 30)); //显示图标
			}
			marker.setIcon(icon); //设置标签图标自定义图标
			map.addOverlay(marker); //添加标注    
			content = "<div class='col-xs-12' Style='width:360px;'>" 
					+ "<div class='form-group form-group-xs'><div class='col-xs-12'>【标注人】:" + love.personName + "</div></div>"
					+ "<div class='form-group form-group-xs'><div class='col-xs-12'>【接收人】:" + love.receiveName + "</div></div>"
					+ "<div class='form-group form-group-xs'><div class='col-xs-12'>【日期】:" + love.creatDate + "</div></div>"
					+ "<div class='form-group form-group-xs'><div class='col-xs-12'>【内容】:" + love.content + "</div></div>"
					+"</div>";
			
			//标注自定义属性
			marker.loveData = {
			   'loveId' : love.loveId,
			   'receiveName' : love.receiveName,
			   'isCheck' : love.isCheck 
			};	
			marker.addEventListener("click", function(e) {
				//alert(e.target.loveData.loveId);
				editPoint(e.target.loveData.loveId);                           
			});
			
			//给标注添加右键菜单
			editMarker = function(e,ee,marker) {
				/* if (marker.loveData.isCheck == 1) {
					alertMsg.info(marker.loveData.receiveName+'已查看该标注信息,无法修改');
					return false;
				} */
				editPoint(marker.loveData.loveId);
			}
			removeMarker = function(e,ee,marker) {
				console.log(marker.loveData.isCheck);
				if (marker.loveData.isCheck == 1) {
					alertMsg.info(marker.loveData.receiveName+'已查看该标注信息,无法删除');
					return false;
				}
				alertMsg.confirm("确定删除该标注?",{ okCall:function(data) {
					console.log(data);
           			delPoint(marker.loveData.loveId,-1);
					map.removeOverlay(marker);
           		}});				
			}
			signUnCheckMarker = function(e,ee,marker) {
				if (marker.loveData.isCheck == 0) {
					alertMsg.info('该标注已经是未查看状态');
					return false;
				}
				alertMsg.confirm("确定标记为未查看?",{ okCall:function(data) {
           			delPoint(marker.loveData.loveId,0);
           			$("#loveMapInitSELContainer .btn.sel-able").trigger('click');
           		}});
			}
			signCheckedMarker = function(e,ee,marker) {
				if (marker.loveData.isCheck == 1) {
					alertMsg.info('该标注已经是已查看状态');
					return false;
				}
				alertMsg.confirm("确定标记为已查看?",{ okCall:function(data) {
					console.log(data);
           			delPoint(marker.loveData.loveId,1);
           			$("#loveMapInitSELContainer .btn.sel-able").trigger('click');
           		}});
			}
			markerMenu=new BMap.ContextMenu();
			markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
			markerMenu.addItem(new BMap.MenuItem('标记为未查看',signUnCheckMarker.bind(marker)));
			markerMenu.addItem(new BMap.MenuItem('标记为已查看',signCheckedMarker.bind(marker)));
			marker.addContextMenu(markerMenu);			
			
			//添加窗口信息
			infoWindow = new BMap.InfoWindow(content); 
			marker.infoWindow = infoWindow;
			marker.addEventListener("mouseover", function(e) { //标注添加鼠标停留事件,展示窗口信息
				this.openInfoWindow(e.target.infoWindow);
			});
			marker.addEventListener("mouseout", function(e) { //标注添加鼠标离开时间,关闭窗口信息
				this.closeInfoWindow(e.target, infoWindow);
			});
		}
		map.setViewport(linePoints); //调整路线到最佳视野
	}

实现效果:

拖动图钉添加标注

给标注添加右键属性:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值