内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
20 Jun.2019

       做项目的时间,有个要求是echarts地图、百度地图两层联动,及三级下钻。 由于DIV窗器需要使用百分比自适应大小,所以设计了下层百度地图高宽为100%,上层echarts地图高宽为90%,绝对定位 left:5%  top:5% ,   设置完成后发现,在点击下钻后echarts生成的地图没有自适应,宽度高度均为90px,  90%直接变成了90px,  地图紧缩到了一起。 原来想着使用JS修改覆盖层宽高,但发现生成的地图是canvas生成的,使用js无法修改。于是放狗搜索一翻,发现如下博文:
https://blog.csdn.net/liuminyi1987/article/details/79653737


原因查了一下echarts源码,发现了这个

    Painter.prototype._getWidth = function() {
        var root = this.root;
        var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
        return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
    };

echarts绘制图表计算宽度的时候,由于覆盖层div的属性默认设置为display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 90%;转为90,所以计算出的图表宽度为90px。

前面文中提到的要使用固定宽度,不符合我的需求,所以要另想他法。

即然display:none导致无法获取clientWidth,那么就从这里下手,让他显示覆盖层宽度。

我们使用绝对定位负偏移的方法,使的覆盖层默认隐藏。   使用 left:-99999px  替换  display:none  ,   使用 left:0  替换 display:block ,  在点击下钻后显示覆盖层。


function goBackDistrictMap(){
  $('#district_map').css('left','5%');
  $('#community_map').css('left','-99999px');
  $('#street_map').css('left','-99999px');
  var map = new BMap.Map("baidu_map"); // 创建Map实例              
  var mapCenter = new BMap.Point(113.106107, 36.297896);
  map.centerAndZoom(mapCenter,12); //设置地图中心点及缩放等级
  map.enableScrollWheelZoom();
  map.setMapStyle(mapStyle);
  map.addOverlay(lzq);
}

以上方法完美解决!


另外需要注意的是: 在设置DIV层自适应100%高度时,必须同时设置html、body的高度为100%,且margin、padding为0

html, body{height: 100%; margin: 0; padding: 0;}



分享到QQ空间
最后编辑: 我就是个世界 编辑于June 20, 2019 09:45
时间:09:45 评论(0) 引用(0) 阅读(213) Tags: ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情