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

内嵌页面标注ESWebViewMarker绘制(收费功能)

可以加载播放在线视频的页面，可以加载摄像头视频的播放页面，可以加载所有网页URL，可以加载DIV自定义的样式块。

ESWebViewMarker最好不超过10个,因为浏览器内存限制1G左右,加载过多内嵌页面会慢,可采用共用一个ESWebViewMarker,可以动态更新网页url和位置,可以参考在线体验效果。

第一步:新建webViewMarker图层（以下代码都要在地图加载完成后调用map.on('loadComplete'）

	var layer = new esmap.ESLayer(esmap.ESLayerType.WEBVIEW_MARKER);

第二步:创建内嵌页面标注实例（方法1：直接使用内嵌页面url）

    var marker = new esmap.ESWebViewMarker({
        url:"https://www.esmap.cn",   //方法1：直接使用内嵌页面url
        x: map.center.x,  //地图坐标x
        y: map.center.y,   //地图坐标y
        height: 3, //marker距离地面的高度
        size: {
            w: 8, //窗口宽
            h: 6  //窗口高
        },
        created:function(e) {
            //创建完成钩子，参数e即代表webViewMarker
        },
        closeCallBack:function(){
            //删除完成钩子
        },
        childWidth: 128 //html元素显示的像素,单位px
    })
	

第二步:创建内嵌页面标注实例（方法2：如需展示自己的div内容，增加customHtmlId属性）

	//html代码里面先增加一个DIV标签
	< div id="myDiv" >
		< div >你好，ESMAP。我是DIV :)< /div >
	< /div >
	
	//下面是JS代码
    var marker = new esmap.ESWebViewMarker({        
        //方法2：如需展示自己的div内容，增加customHtmlId属性,url属性将忽略
        customHtmlId: "#myDiv",   //自定义页面内容，传入自定义div的id属性
        x: map.center.x,  //地图坐标x
        y: map.center.y,   //地图坐标y
        height: 3, //marker距离地面的高度
        size: {
            w: 8, //窗口宽
            h: 6  //窗口高
        },
        created:function(e) {
            //创建完成钩子，参数e即代表webViewMarker
        },
        closeCallBack:function(){
            //删除完成钩子
        },
        childWidth: 128 //html元素显示的像素,单位px
    })
	

第三步:将marker添加到图层对象中,并且将图层对象添加到楼层对象

    layer.addMarker(marker);
    var floor = map.getFloor(1);    //获取第一层的楼层管理对象  
    floor.addLayer(layer);

---

删除标注

    //floor为楼层管理对象，通过map.getFloor(fnum)获取
    floor.removeLayersByTypes(esmap.ESLayerType.WEBVIEW_MARKER);

也可以从图片标注图层中删除图片标注：

    //获取内嵌页面标注图层对象 layer
    layer.remove(marker);   //删除某一个标注\
        或者：
    layer.removeAll();   //删除该图层下所有的标注
 

其他方法

	
   //移动标注位置
	marker.moveTo({
        x: x, 
        y: y
    }) 
    
    //更新页面url
    marker.setSrc("https://www.esmap.cn")