web-dev-qa-db-ja.com

agm-markerを使用してアイコンのサイズを管理します

高さと幅の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';

このアイコンのサイズを操作する方法を教えてください。これは私が追加したカスタムアイコンです

angulartypescriptgoogle-maps-api-3angular-google-maps
5
sah

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>

実際のサイズではなく、画像の縮尺を変更することを考慮に入れてください。

24
zolastro

ペイントで画像/アイコンのサイズを手動で変更し、30または40ピクセルに保ちます。これで問題は解決します。

0
Kiran Raj

これを試して

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