返回带有角度的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 [phone] or via [e-mail].","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 (将#修改为@）