Управляйте размером иконки с помощью agm-маркера

Question

Я пытаюсь применить CSS для высоты и ширины к значку.

Код, который я использовал для иконки с agm-маркером ниже: -

<agm-marker *ngFor="let m of mapData; let i = index"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="labelOptions"
    [iconUrl]="iconUrl">
</agm-marker>

.ts

public iconUrl = 'http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/08/ddrive.png';

Пожалуйста, дайте мне знать, как я могу манипулировать размером этой иконки. Это пользовательский значок, который я добавил

Answer 1

Вы можете передать Icon объект в качестве параметра IconURL, Icon имеет scaledSize параметр, который вы можете изменить. Это может быть примером:

    icon = {
              url: http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/08/ddrive.png',
              scaledSize: {
                width: desiredWidthScale,
                height: desiredHeightScale
              }
}

Так что вы можете просто использовать:

<agm-marker *ngFor="let m of mapData; let i = index"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="labelOptions"
    [iconUrl]="icon">
</agm-marker>

Учтите, что вы изменяете масштаб изображения, а не фактический размер.

Answer 2

Чтобы построить ответ на золастро. Вы можете передать объект google.map.Icon в атрибут iconUrl agm-marker. Но ваш компилятор может пожаловаться на то, что он не может быть назначен ожидаемому типу «строка». Чтобы обойти это, вы можете просто инкапсулировать свой объект значка в $any

.тс

      icon = {
  url: 'http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/08/ddrive.png',
  scaledSize: {
    width: desiredWidthScale,
    height: desiredHeightScale
  }
}

.html

      <agm-marker *ngFor="let m of mapData; let i = index"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="labelOptions"
    [iconUrl]="$any(icon)">
</agm-marker>

Answer 3

Попробуй это

  icon = { url: '../../assets/images/yyy.svg', scaledSize: {height: 40, width: 40}

Answer 4

Вручную измените размер изображения / значка в краске и сохраните его на 30 или 40 пикселей. Это решит проблему.