功能要求:拖动地图上的图钉时,在某个位置进行标注。并给标注添加右键操作属性。
【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); //调整路线到最佳视野
}
实现效果:
拖动图钉添加标注
给标注添加右键属性: