您现在的位置: 首页 > SDK开发 > 开发指南

气泡标注绘制

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

    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()   //删除标注

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功能