使用ammm标记管理图标的大小

问题描述 投票:4回答:3

我正在尝试将高度和宽度的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';

[请让我知道如何处理此图标的大小。这是我添加的自定义图标

angular typescript google-maps-api-3 angular-google-maps
3个回答
21
投票

您可以将Icon对象作为参数传递给IconURLIcon具有可以修改的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>

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


0
投票

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


0
投票

尝试一下

  icon = { url: '../../assets/images/yyy.svg', scaledSize: {height: 40, width: 40}
© www.soinside.com 2019 - 2024. All rights reserved.