乐趣区

关于前端:angular中使用leaflet与scss的一些问题

这次以前做的一个我的项目又双叒叕加辣新需要

自然而然又有了新问题

首先如下图所示,须要两个地图

左侧的是子组件中的地图,右侧的是父组件中的地图,子组件中传入了父组件的 this 对象。

在子组件中的 ngOnInit 生命周期钩子中初始化地图的话会呈现

或者地图曾经被初始化过的谬误,所以放在 ngAfterViewInit 中初始化就没有问题了

而后遇到的第一个问题就是,地图显示不全,如下图所示

能够看到地图只显示很小的一片区域,挪动的时候也不会扩充显示区域。这时候个别在正确的中央写上代码 this.map.invalidateSize(true) 就行了,官网文档里对这个办法的形容是

简而言之就是依据容器大小动静更新地图。之所以说个别状况下这样写就对了,因为还有其余的状况

第二种状况也会导致地图显示不全
就是 img 的款式问题,如下图

这里在父组件中定义了 map 的预设款式。

子组件中也同样,利用到了这个款式,我更改了 leaflet 中的 mark,标记用的不是点,用的是 img 图片代替,我在款式中应用了款式穿透
:host ::ng-deep .divlayer .divcontent img 就会造成下面的地图显示不全。解决办法就是更具体到 img 中为图标的那一类
也就是:host ::ng-deep .divlayer .divcontent img.leaflet-marker-icon 这样问题就解决了,大快人心

scss 和 less 在 angular 中应用的不同目前发现的一点就是

less 中能够应用:host /deep/ xxx{}不会报错,而在 scss 中 /deep/ 会报错,能够用::ng-deep 代替。

退出移动版