Question

由于我已经从SystemJS迁移到Webpack（Angular CLI）作为模块捆绑器，我的自定义谷歌地图制作者不再显示，但默认显示，以下是我的模板：

            <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker>
                  <sebm-google-map-marker 
                     *ngFor="let nearMovingAgent of nearMovingAgents"
                    [latitude]="nearMovingAgent.obj.location[1]"
                    [longitude]="nearMovingAgent.obj.location[0]"                       
                    [iconUrl]= "nearMovingAgent.obj.agent_type == 'moving_company'? iconPathMC:iconPathSS" >

                    <sebm-google-map-info-window>                       
                        <h5 class="modal-title" *ngIf="nearMovingAgent.obj.agent_type == 'moving_company'"><small>Moving Company</small></h5>
                        <h5 class="modal-title" *ngIf="nearMovingAgent.obj.agent_type == 'self_standing'"><small>Self Standing Bakkie/Truck Owner</small></h5> 
                        <hr>
                        <p>{{nearMovingAgent.obj.address | capitalize }}</p>
                        <button class="btn view-details" data-toggle="modal" data-target="#myModal" (click)="viewMovingAgentDetail(nearMovingAgent)">View Details</button>
                    </sebm-google-map-info-window>       
                  </sebm-google-map-marker>
        </sebm-google-map>

当我删除属性时：

[iconUrl]= "nearMovingAgent.obj.agent_type == 'moving_company'? iconPathMC:iconPathSS"

显示默认图标

我的组件类中有以下内容：

 iconPathMC: string = "../../../images/truck3.png";
 iconPathSS: string = "../../../images/pickup.png";

我已经尝试将上述语句移动到ngOnInit（）中，但我仍然无法看到地图上的图标，即使它没有抛出任何错误。我的服务器（NodeJS，Express和nodemon）显示请求的状态为200。图片：

GET /images/truck3.png
GET /images/pickup.png
GET /images/truck3.png 200 19.230 ms - 1347
GET /images/pickup.png 200 20.781 ms - 1347

我是否必须挂钩到不同的组件生命周期才能显示图标，任何人都可以告诉我我缺少的内容。谢谢。

Answer 1

我已经在我的组件

中解决了这个问题

declare var require: any;

markerIconUrl() {
   return require('../../../images/truck3.png')
}

然后在我的模板中调用方法'markerIconUrl'，如

<sebm-google-map-marker 
   *ngFor="let nearMovingAgent of nearMovingAgents"
    [iconUrl]="markerIconUrl()"                      
>

虽然它解决了这个问题，但我仍然在研究它为什么是一个问题，它与Webpack的工作方式有关。

使用iconUrl SebmGoogleMap使用自定义Google地图标记

1 个答案: