Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angularjs 使用iconUrl SebmGoogleMap使用自定义谷歌地图标记_Angularjs_Google Maps_Angular Cli - Fatal编程技术网

Angularjs 使用iconUrl SebmGoogleMap使用自定义谷歌地图标记

Angularjs 使用iconUrl SebmGoogleMap使用自定义谷歌地图标记,angularjs,google-maps,angular-cli,Angularjs,Google Maps,Angular Cli,由于我已从SystemJS迁移到Webpack(Angular CLI)作为模块绑定器,因此我的自定义google地图制作工具不再显示,但默认制作工具会显示,以下是我的模板: <sebm-google-map-marker [latitude]="lat" [longitude]="lng"></sebm-google-map-marker> <sebm-google-map-marker

由于我已从SystemJS迁移到Webpack(Angular CLI)作为模块绑定器,因此我的自定义google地图制作工具不再显示,但默认制作工具会显示,以下是我的模板:

            <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>
将显示默认图标

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

 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
我是否必须连接到不同的组件生命周期才能显示图标,有人能告诉我我缺少了什么吗。
谢谢。

我已经在我的组件中解决了这个问题

declare var require: any;

markerIconUrl() {
   return require('../../../images/truck3.png')
}
然后在我的模板中调用方法“markerIconUrl”,如

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

虽然它解决了这个问题,但我仍在研究为什么它会成为一个问题,这与网页包的工作方式有关

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