气泡标注绘制
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功能