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

时间:2017-11-07 09:19:50

标签: angular google-maps angular-google-maps

如何以有条件的方式设置谷歌标记的可能方式示例我的数据是

{
    "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>

2 个答案:

答案 0 :(得分:0)

检查Angular / Typescript条件运算符

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

在你的ts或html中,添加如上所述的布尔条件,以及两个选项:

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

最佳;)

答案 1 :(得分:0)

我希望,这是最适合模板的条件

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