come utilizzare la funzione heatmap di Google Maps utilizzando agm angolare

sto usando componente angolare @agm/core a https://github.com/SebastianM/angular-google-maps per il mio ultimo progetto angolare 5 per mostrare Google Maps. funziona alla grande, e ora voglio aggiungere Google Maps strato heatmap dalla libreria di visualizzazione. non riesco a capire come farlo. per favore aiuto

EN From: how to use google maps heatmap feature using angular agm

More similar articles:

5 Comments

  1. i passi seguenti hanno funzionato per me (per notare che non ho trovato altri esempi per questo dopo lunga ricerca).

    1. installa i tipi agm e GoogleMaps:

    npm install @agm/core --save
    npm install @types/googlemaps --save-dev

    2. Aggiungi “google” ai tipi di array all’interno di compilerOptions in tsconfig. ad esempio:

    "types": [
        "google"
    ]

    3.. quando si configura il modulo agm, aggiungere la visualizzazione al tasto api. ad esempio:

    AgmCoreModule.forRoot({
        apiKey: '...' + '&libraries=visualization'
    })

    4. nel tuo componente html:

    <agm-map [latitude]="..." [longitude]="..." (mapReady)="onMapLoad($event)">
    </agm-map>

    5.. nel vostro componente ts:

    private map: google.maps.Map = null;
    private heatmap: google.maps.visualization.HeatmapLayer = null;
    
    ...
    
    onMapLoad(mapInstance: google.maps.Map) {
        this.map = mapInstance;
    
        // here our in other method after you get the coords; but make sure map is loaded
    
        const coords: google.maps.LatLng[] = ...; // can also be a google.maps.MVCArray with LatLng[] inside    
        this.heatmap = new google.maps.visualization.HeatmapLayer({
            map: this.map,
            data: coords
        });
    }

    assicurarsi che la mappa funzioni bene prima senza il codice heatmap (ad esempio, impostare l’altezza, il tasto api, ecc).

    1. invece di aggiungere librerie, si può semplicemente usare libraries chiave di LazyMapsAPILoaderConfigLiteral
  2. grazie André Mantas per la vostra soluzione

    ho affrontato una serie di questioni relative alla ‘google’ tipi. quindi, ho aggiunto questa linea al controller del componente

    declare var google: any;
    
    private map: any;
    private heatmap: any;

    e ha funzionato

Leave a Reply

Your email address will not be published. Required fields are marked *