Búsqueda de sitios web

typescript - Angular 8 y Google Maps con agrupación de marcadores - Error de tipo markercluster no es un constructor


Estoy tratando de comenzar con Google Maps y la agrupación de marcadores (de forma nativa, es decir, sin usar AGM). El mapa se carga bien y he añadido varios marcadores al mapa. Sin embargo, al intentar agregar el agrupador de marcadores obtengo un error de tipo. Que dice:

ERROR TypeError: "_google_markerclusterer__WEBPACK_IMPORTED_MODULE_7__ no es un constructor"

He instalado el agrupador de marcadores usando npm de esta manera:

npm i @google/markerclusterer --save-dev

Luego añadí lo siguiente en mi componente en la parte superior del archivo junto con mis otras importaciones que manejan los marcadores/agrupamiento:

import * as MarkerClusterer from "@google/markerclusterer";

Luego en mi clase lo uso como dice el ejemplo:

const gmarkers = [];

            _.each(this.venueData.venues, (venue) => {
                const mPosition = new google.maps.LatLng(venue.latlng.lat, venue.latlng.lng);
                const marker = new google.maps.Marker({position: mPosition, map: this.map});

                gmarkers.push(marker);
            });

            const test = new MarkerClusterer(this.map, gmarkers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}
            );

He intentado desinstalar y reinstalar Google Marker Clusterer, así como también probar con Marker Clusterer Plus, pero sigo teniendo el mismo problema.

Respuesta #1

Logré resolver esto cambiando la siguiente importación.

Cambia esto:

import * as MarkerClusterer from '@google/markerclusterer';

Para :

import MarkerClusterer from '@google/markerclusterer';

Respuesta #2

Agregar MarkerClusterer a la compilación de Angular y declarar MarkerClusterer en el archivo del componente.

En angular.json

"scripts": [
    "node_modules/@google/markerclusterer/dist/markerclusterer.min.js"
 ]

En component.ts

declare var MarkerClusterer:any;

Nota: Antes de cargar markerclusterer.js, asegúrese de cargar el script de Google Maps.