在 angular-google 地图中有条件地设置标记在 angular 上使用 4

Question

如何在 angular 中设置 google 标记的可能方法有条件地示例我的数据是

{
    "lat":23.830625,
    "lng":90.417662,
    "zipcode":31208,
    "city":"Macon",
    "drivetime":33,
    "distance":7,
    "dms":33,
    "market":32,
    "market-share":"00"
},
{   
    "lat":23.831095,
    "lng": 90.417080,
    "zipcode":31206,
    "city":"Macon",
    "drivetime":45,
    "distance":10,
    "dms":45,
    "market":580,
    "market-share":"00"
}

当 dms 小于 dms>40 时添加黄色标记 dms>20 然后添加红色标记否则默认

<sebm-google-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [disableDefaultUI]="false"
  [zoomControl]="false"
  >
  <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index"
      [latitude]="m.lat"
      [longitude]="m.lng"
       [iconUrl]="if(m.dms>40){default}else if(m.dms>50){green} else {red}"
      >
  </sebm-google-map-marker>

Answer 1

检查 Angular / Typescript 条件运算符

[input]="m.dms>30 ? ifTrueValue : elseValue"

在您的 ts 或 html 中，像上面那样添加您的布尔条件，以及两个选项：

ifTrueValue = "YelowIcon.png"; and elseValue="RedIcon.png";

最佳 ;)

Answer 2

我希望，这是模板嵌套条件的最佳选择

[iconUrl]="(data.dms>50)? markericon1: (data.dms>35)? markericon2 : markericon3"

在 angular-google 地图中有条件地设置标记在 angular 上使用 4

conditionally set marker in angular-google map use on angular 4

google-maps

angular-google-maps

angular