web-dev-qa-db-ja.com

agm-mapでカスタム矢印マークを作成する方法は？

私は車両追跡アプリケーションを構築しており、agm-map-markerを使用して、このように配置された車両を画像に表示しています （enter image description here

そして、Livetracking.component.htmlコードは、

<agm-map #gm [latitude]="lat" [longitude]="lng" [(zoom)]="zoom" [mapTypeControl]="true">
            <agm-marker class="mapMarker" *ngFor="let device of devices;"
                [latitude]="device.latitude" [longitude]="device.longitude"
                (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow;mapMarkerInfo(m);">
            </agm-marker>
</agm-map>

ここでは、この画像のように、マーカーを矢印に置き換える必要があります。

enter image description here

2番目の画像のように、マーカーを矢印に変更する必要があります。目的の結果を達成できるようにご協力ください。

angulargoogle-mapsgoogle-maps-api-3google-maps-markersarrows
8
Maniraj Murugan

既存のAPIを使用して、 iconUrl を設定できます

<agm-marker
   [latitude]="location.latitude"
   [longitude]="location.longitude"
   [iconAnchorX]="10"
   [iconAnchorY]="10"
   [iconHeight]="20"
   [iconWidth]="20">
   [iconUrl]="location.icon">
 </agm-marker>
9
Sajeetharan

これらはagm-markerのプロパティではないため、受け入れられた回答は機能しません。

iconUrlプロパティ内では、次のタイプのいずれかを使用できます。

string

Icon： https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#Icon

Symbol： https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#Symbol

たとえば、カスタムイメージマーカー（この場合はSVG）を目的のサイズで使用するには、[iconUrl]プロパティでこのオブジェクトを使用できます。

{
    url: './assets/images/blue-marker.svg',
    scaledSize: {
        width: 40,
        height: 60
    }
}
18
Daniel López