angular - 使用 agm-marker 管理图标的大小

Question

我正在尝试将高度和宽度的 css 应用于图标。

我用于带有 agm-marker 的图标的代码如下:-

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

请注意您修改的是图像的比例而不是实际尺寸。