Angularjs 使用iconUrl SebmGoogleMap使用自定义谷歌地图标记
由于我已从SystemJS迁移到Webpack(Angular CLI)作为模块绑定器,因此我的自定义google地图制作工具不再显示,但默认制作工具会显示,以下是我的模板: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
<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()"
>