如何解决返回带有角度的html标记的打字稿值agm标记
我已经在这个问题上停留了一段时间,希望任何人都可以给出任何提示。
所以我正在使用agm(谷歌角度地图),并且正在尝试设置图标网址。
在此图标网址中,您可以按如下所示进行设置。
这是我在此组件的打字稿文件中拥有的
icon = {
url: 'assets/agm-markers/RedCircle.png',scaledSize: {
width: this.iconWidth,height: this.iconHeight
}
}
所以这很好
<agm-marker [latitude]="userLat" [longitude]="userLng" [iconUrl]= 'icon'>
<agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
<ng-template>
<strong>you are here</strong>
<p>YOU</p>
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
我试图遍历所有数据并为每个数据映射它们。所以我将其用于项目的另一部分
<div *ngFor="let m of markers;let i = index;" >
<agm-marker [latitude]="m.lat" [longitude]="m.lng" [iconUrl]= 'getTheIcon(m.risk)' >
<!-- snazy window is the google maps text window that pops up -->
<agm-snazzy-info-window [maxWidth]="800" [closeWhenOthersOpen]="true" backgroundColor="grey">
<ng-template>
<mat-card><p>{{m.title}} </p></mat-card>
<!-- getcolour is in the ts connected to the component -->
<mat-card [ngStyle]="{'background':getTheColor(m.colour)}">
<mat-nav-list>Risk section updated with risk colour</mat-nav-list>
</mat-card>
<mat-card> <p>{{m.notes}} </p></mat-card>
<mat-card><mat-nav-list>Start Date : {{m.startDate}}. End Date : {{m.startDate}}</mat-nav-list> </mat-card>
<mat-card><mat-nav-list>{{m.description}}</mat-nav-list> </mat-card>
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</div>
所以上面的代码是这一行
<agm-marker [latitude]="m.lat" [longitude]="m.lng" [iconUrl]= 'getTheIcon(m.risk)' >
从ts文件中使用此
getTheIcon(risk) {
var a = this.icon;
a.url = this.icons.filter(item => item.risk === risk)[0].color
return (a);
}
这是它正在使用的图标对象
// get icons
icons =
[
{ risk: "High",color: 'assets/agm-markers/RedCircle.png',scaledSize: {
width: this.iconWidth,height: this.iconHeight,}
},{ risk: "Moderate",color: 'assets/agm-markers/YellowCircle.png',}
},{ risk: "Low",color: 'assets/agm-markers/GreenCircle.png',]
所以这可行,但仅在我可以改变颜色而不影响尺寸的范围内,或者我可以使尺寸起作用而不对颜色起作用。
下面是json的示例
{
"alert": {
"alertId": "c6f0a2a0-f8c9-34a1-b92f-170c8844a69b","title": "Update: 30 killed during oil tanker explosion in Lakoja","description": "Local media reports that at least 30 people were killed when an oil tanker exploded due to a traffic collision in Lakoja. The incident took place on the A233 at around 09:00 this morning.","categoryId": "2232e1b1-1c3a-446c-ac02-6772f667f4c3","riskId": "849beaeb-d95d-46d7-90dd-5a7c9da29c86","startDate": "2020-09-23T10:02:28.9","endDate": "2020-09-24T10:02:28.9","countryId": "2ae8ed91-a795-4381-b158-3c68f61e19f2","createdDate": "2020-09-23T10:07:12.2","createdBy": "19d4dc0b-ab0b-4c97-8c6b-299956289423","latitude": 7.79441,"longitude": 6.73248,"notes": "Avoid the area of the explosion and allow emergency crews to respond to the incident. Traffic disruption due to closed roads can be expected. For further assistance,training,or advice,please contact the Solace Global Risk operations centre on +44 (0) 1202 795 801 or via sgr@solaceglobal.com.","customerId": null,"formattedAddress": "","suname": null,"firstname": null,"email": null,"phone": null
},"category": {
"categoryId": "2232e1b1-1c3a-446c-ac02-6772f667f4c3","categoryName": "Caution","isDeleted": false,"iconId": "60aff035-2304-46b6-8269-13c1eeb17d6b","customerId": "f120d2a6-d3f4-4a12-8de3-57449089ee9e","categoryTypeId": "8c586931-42b4-47a5-8290-33b2f6835d0a","flash": false
},"risk": {
"riskId": "849beaeb-d95d-46d7-90dd-5a7c9da29c86","riskName": "High","colourId": "b8e0f70c-2814-4b13-b704-97ebf8a28c1d","sortOrder": 3
},"country": {
"countryId": "2ae8ed91-a795-4381-b158-3c68f61e19f2","countryName": "Nigeria","latitude": 9.04949,"longitude": 7.42218,"isoCode": "NG"
},"colour": {
"colourId": "b8e0f70c-2814-4b13-b704-97ebf8a28c1d","colourName": "Orange","colourRed": 255,"colourGreen": 102,"colourBlue": 0,"customerId": "00000000-0000-0000-0000-000000000000","rgbColor": "rgb:255,102,0"
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。