web-dev-qa-db-fra.com

Comment faire une marque de flèche personnalisée dans agm-map?

Je suis en train de créer une application de suivi des véhicules et j'utilise agm-map-marker pour afficher les véhicules qui se trouvaient comme ça dans l'image, enter image description here

Et le code Livetracking.component.html est,

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

Ici, je dois remplacer le marqueur en flèches, exactement comme dans cette image,

enter image description here

J'ai besoin de changer le marqueur en flèche comme dans la deuxième image .. Aidez-moi gentiment à atteindre le résultat souhaité ..

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

Vous pouvez utiliser l'API existante et définir le iconUrl

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

La réponse acceptée ne fonctionnera pas car ce ne sont pas des propriétés de agm-marker.

Dans la propriété iconUrl, vous pouvez utiliser l'un de ces types:

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

Par exemple, pour utiliser un marqueur d'image personnalisé (SVG dans ce cas) avec la taille souhaitée, vous pouvez utiliser cet objet dans le [iconUrl] propriété:

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