Funcionalidades comunes de la API de AMap 2.0

Cambios en la vinculación de eventos

En la versión 2.0, la vinculación de eventos se realiza mediante object.on(), y la desvinculación utiliza object.off().

Implementación de geolocalización

La geolocalización ahora se ejecuta pasando una función de callback directamente. Ejemplo:

const geolocalizar = (manejador) => {
    const instanciaGeo = new AMap.Geolocation();
    instanciaGeo.getCurrentPosition((estado, resultado) => {
        if (estado === 'complete') {
            const { position: { lng: longitud, lat: latitud } } = resultado;
            manejador(longitud, latitud);
        } else {
            console.error(resultado);
            manejador(null, null);
        }
    });
};

Agrupación de marcadores con MarkerCluster

La clase cambió a MarkerCluster, y la personalización de marcadores individuales se gestiona mediante renderMarker. Ejemplo:

const configurarCluster = (mapa, datos) => {
    new AMap.MarkerCluster(mapa, datos, {
        gridSize: 100,
        zoomOnClick: true,
        renderClusterMarker: (ctx) => {
            const count = ctx.count;
            ctx.marker.setContent(`<div class="cluster">${count}</div>`);
        },
        renderMarker: (ctx) => {
            ctx.marker.setContent(`<div class="individual">${ctx.data.titulo}</div>`);
        }
    });
};

Configuración de marcadores flexibles

Los marcadores flexibles (ElasticMarker) mantienen una estructura similar. Ejemplo de uso:

const mapeoZoom = {
    5: 0, 6: 0, 7: 0, 8: 0, 9: 0, 10: 0,
    11: 1, 12: 1, 13: 1, 14: 1, 15: 1, 16: 1
};

const definicionesEstilo = [
    {
        icon: {
            img: 'icono.png',
            size: [30, 30],
            anchor: 'center',
            fitZoom: 12,
            scaleFactor: 2,
            maxScale: 3,
            minScale: 1
        }
    },
    {
        label: {
            content: 'Etiqueta personalizada',
            position: 'BM'
        }
    }
];

const marcadorElastico = new AMap.ElasticMarker({
    position: [116.397, 39.908],
    styles: definicionesEstilo,
    zoomStyleMapping: mapeoZoom,
    zIndex: 10
});

Gestión de coberturas de mapa

El método setMap() está deprecado; se debe usar this.map.add(overlay) para agregar coberturas.

Componentes de interfaz

La barra de herramientas solo incluye el componente de zoom. El botón de localización integrado no ofrece callbacks; es recomendable implementar un botón personalizado que invoque métodos de geolocalización con controladores de eventos propios.

Etiquetas: AMap API2.0 JavaScript Geolocalización AgrupaciónMarcadores

Publicado el 6-22 02:24