您现在的位置: 首页 > 室内三维可视化SDK开发 > 开发指南

气泡标注绘制

1.创建默认样式的气泡标注（以下代码都要在三维场景加载完成后调用map.on('loadComplete'）

map.on('loadComplete',function(){                   
	var popMarker = new esmap.ESPopMarker({
	mapCoord:{
	    	x:x, //设置弹框的坐标
	    	y:y,
	    	height: 4, //控制信息窗的高度
	    	//设置弹框位于的楼层
		    fnum: 1
		} 
		        //设置弹框的宽度
	    width: 300,
	    //设置弹框的高度
	    height: 100,
	    marginTop: 10,
	    //设置弹框的内容
	    content: 'HTML代码<  a target="_bank" href="http://www.esmap.cn">易景空间三维场景官方网站< /a>',
	    closeCallBack: function () {
	        //信息窗点击关闭操作
	        // alert('信息窗关闭了！');
	    },
	    created: function () {
	        //创建完成钩子函数
	    }
	});
})

气泡标注相关的方法

 
popMarker.hide()   //隐藏
popMarker.show()    //显示
popMarker.toggle()  //切换显示/隐藏
popMarker.close()   //删除标注

//移动气泡标注位置
var moveToPos = {
  x: mapCoord.x,
  y: mapCoord.y,
  time: 0
}
popMarker.moveTo(moveToPos)

2.创建自己定义样式的气泡标注

var popMarker = new esmap.ESPopMarker({
mapCoord: {
	//设置弹框的x轴
	x: gpos.x - 20,
	//设置弹框的y轴
	y: gpos.y - 20,
	height: 4, //控制信息窗的高度
	//设置弹框位于的楼层
	fnum: 1
},
className:"myPopMarker",  //自定义popMarker样式。在css里配置
//设置弹框的宽度
width: 300,
//设置弹框的高度
height: 150,
marginTop:10,  //弹框距离地面的高度
//设置弹框的内容
content: ' 自定义样式popMarker< p >点击下方图片标注切换显示隐藏；长按图片标注可以拖动< /p >< div class="myPopClose" >关闭< /div >',
closeCallBack: function () {
	//信息窗点击关闭操作
	// alert('信息窗关闭了！');
},
created: function (e) {
	//创建完成钩子

	$(".myPopClose").click(function(){
		//关闭删除
		popMarker.close();
		//为自定义关闭按钮绑定隐藏事件
		//popMarker.hide();
	})
}
});

/* 以下是自定义气泡标注样式 */
.myPopMarker{
    padding: 0;
	padding-right: 36px;
	background: #aaa;
	color: #fff;
	border:1px solid #5e5e5e;
}
.myPopClose{  
	position: absolute;
	top: 0;
	right: 0;
	width: 43px;
	height: 25px;
	text-align: center;
	background-color: honeydew;
	color: #000;
	cursor:pointer;
}

演示图中气泡标注的鼠标长按移动事件是VIP功能