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

自然而然又有了新问题

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

左侧的是子组件中的地图,右侧的是父组件中的地图,子组件中传入了父组件的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代替。