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

考虑到您正在修改图像的比例而不是实际尺寸。

Answer 2

以 zolastro 答案为基础。您可以将 google.map.Icon 对象提供给 agm-marker 的 iconUrl 属性。但是您的编译器可能会抱怨它不能分配给预期的类型“字符串”。要绕过它，您可以简单地将图标对象封装到 $any

.ts

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

手动调整绘画中的图像/图标大小并保持30或40像素。 这将解决问题。

Answer 4

尝试一下

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