如何优化.forEach循环打字稿（长任务）

Question

我如何优化这个绘制谷歌地图及其标记的帮助程序中的 .forEach 循环（在 filterMarkers() 函数内部），并使用根据地图缩放对所有标记进行分组的markerClusterer。

我认为根据 initMap() 内的标签 localizaciones[index].agrupacion 对不同数组中的所有标记进行分组，并在调用 filterMarkers() 的事件触发时以某种方式分配它们，这样程序只运行循环一个不是每次事件触发时，但我不知道如何处理这个想法，我向您展示用打字稿制作的助手：

import { ref } from "vue";
import axios from "@/plugins/axios";
import { MarkerClusterer } from "@googlemaps/markerclusterer";
import {
    ILocalizacion,
    ILocalizacionesF,
    IDetalleEstacion,
    ITags,
} from "@/Interfaces/mapas/IMapas";

export const map = ref<google.maps.Map>();
export const service = ref<google.maps.places.PlacesService>();
let geoLocation = ref<ILocalizacion>({ lat: 40.53926, lng: -3.69467 });
let infowindow = ref<google.maps.InfoWindow>();
let localizacionesCluster: google.maps.Marker[] = [];
let markerCluster: MarkerClusterer;
let icon: string = "";
let detalleEstacion: any;
const iconosServicios = {
    a24h: "icon-servicio_24h",
    adblue: "icon-adblue",
    cafe_rest: "icon-cafeteria",
    cajero: "icon-cajero",
    descargatacografo: "icon-descarga_tacografo",
    dieselb: "icon-gasoleo_b",
    ducha: "icon-Duchas",
    hotel: "icon-hotel",
    itv: "icon-itv",
    lavacamion: "icon-Lavaderos",
    parking: "icon-parking_camiones",
    tienda: "icon-tienda",
    recomendada: "icon-recomendado_globalstar",
    diesela: "icon-gasoleo_a",
};
export let tags: ITags[] = [
    { tag: "Ver todo", agrupacion: "0" },
    { tag: "Carburante", agrupacion: "487" },
    { tag: "Reserva", agrupacion: "494" },
    { tag: "Parking", agrupacion: "1093" },
    { tag: "Lavadero", agrupacion: "946" },
    { tag: "Tacógrafo", agrupacion: "755" },
    { tag: "Ferry", agrupacion: "944" },
];

export async function initMap(localizaciones: ILocalizacionesF[]) {
    navigator.geolocation.getCurrentPosition(
        function (position) {
            geoLocation.value.lat = position.coords.latitude;
            geoLocation.value.lng = position.coords.longitude;
        },
        function (error) {
            if (error.code == error.PERMISSION_DENIED) {
            }
            //alert("Permiso de geolocalización denegado, esto puede hacer que la app no funcione correctamente.");
        }
    );

    const { Map } = (await google.maps.importLibrary(
        "maps"
    )) as google.maps.MapsLibrary;

    const { PlacesService } = (await google.maps.importLibrary(
        "places"
    )) as google.maps.PlacesLibrary;

    map.value = new Map(document.getElementById("googleMap")! as any, {
        center: geoLocation.value,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        zoom: 5,
        zoomControl: false,
    });

    service.value = new PlacesService(map.value);
    infowindow.value = new google.maps.InfoWindow();

    for (let index = 0; index < localizaciones.length; index++) {
        let marker = new google.maps.Marker({
            position: {
                lat: localizaciones[index].lat,
                lng: localizaciones[index].lng,
            },
            map: map.value,
            title: localizaciones[index].agrupacion,
            icon: setIcon(localizaciones[index].agrupacion),
        });
        localizacionesCluster.push(marker);

        google.maps.event.addListener(marker, "click", async function () {
            detalleEstacion = await pedirDetalleEstacion(
                localizaciones[index].prv_codigo
            );

            for (const [key, value] of Object.entries(detalleEstacion))
                if (
                    (detalleEstacion.hasOwnProperty(key) && value == null) ||
                    value == undefined
                )
                    detalleEstacion[key] = "";

            console.log("detalle estación: ", detalleEstacion);
            infowindow.value?.setContent(setPlantilla(detalleEstacion, marker));
            infowindow.value?.open(map.value, marker);
        });
    }
    cerrarEventos();
    markerCluster = new MarkerClusterer({
        map: map.value,
        markers: localizacionesCluster,
    });
}

function setIcon(agrupacion: string): string {
    icon = "/src/assets/map_icon-";
    switch (agrupacion) {
        case "487":
            return (icon += "1.png");
        case "494":
            return (icon += "2.png");
        case "944":
            return (icon += "3.png");
        case "946":
            return (icon += "4.png");
        case "755":
            return (icon += "5.png");
        case "1093":
            return (icon += "6.png");
        default:
            return "no hay icono";
    }
}

function setPlantilla(
    response: IDetalleEstacion,
    marker: google.maps.Marker
): string {
    let plantilla: string = `
    <div class="blog-slider">
    <h2 class="titulo">${response.titulo}</h2>
    <div class="infoBody">
    <div class="column precio"><div class="precio2">${
        response.precio
    }</div></div>
    <div class="column contenido">
    <table>
    <tr><td>Marca: ${response.marca}</td></tr>
    <tr><td>${response.horario}</td></tr>
    <tr><td>${response.sentido}</td></tr>
    <tr><td><img src="/src/assets/phone.png" /><a href="tel:${
        response.telefono
    }" class="link"> ${response.telefono}</a></td></tr>
    <tr><td>${response.poblacion}</td></tr>
    <tr><td>${response.provincia}</td></tr>
    </table>
    </div>
    </div>
    <div class="iconos"><a href="http://www.google.com/maps/dir/${
        geoLocation.value.lat
    },${geoLocation.value.lng}/${marker.getPosition()?.lat()},${marker
        .getPosition()
        ?.lng()}" target="_blank"><button class="button"><img src="/src/assets/directions.png" /></button></a></div>
    <div class="iconos">`;
    if (response.servicios?.length)
        for (const [key, value] of Object.entries(iconosServicios))
            response.servicios?.forEach((servicio) => {
                if (servicio === key)
                    plantilla += `<i class="icono ${value}" ></i>`;
            });

    plantilla += "</div></div>";
    return plantilla;
}

async function pedirDetalleEstacion(codProveedor: number) {
    console.log(codProveedor);
    const { data } = await axios.get<IDetalleEstacion>(
        `${import.meta.env.VITE_APP_BACKEND_NESTJS}${
            import.meta.env.VITE_APP_GENERAL
        }/detalleEstacionServicio?codProveedor=${codProveedor}`
    );
    return data;
}

export function filterMarkers(agrupacion: string) {
    markerCluster.clearMarkers();
    if (agrupacion == "0") {
        showAllMarkers();
        return;
    }
    localizacionesCluster.forEach((localizacion: google.maps.Marker) => {
        if (localizacion.getTitle() === agrupacion) {
            localizacion.setVisible(true);
            markerCluster.addMarker(localizacion);
            return true;
        } else {
            localizacion.setVisible(false);
            return true;
        }
    });
}

function showAllMarkers() {
    localizacionesCluster.forEach((localizacion: google.maps.Marker) => {
        localizacion.setVisible(true);
    });
    markerCluster.addMarkers(localizacionesCluster);
}

function cerrarEventos() {
    map.value?.addListener("click", function () {
        if (infowindow) infowindow.value?.close();
    });
}

我愿意接受任何其他建议。这里有对执行任务的检查：

Answer 1

我是这样解决的：

export function filterMarkers(agrupacion: string) {
    markerCluster.clearMarkers();
    if (agrupacion == "0") {
        showAllMarkers();
        return;
    }
    let customLoc: google.maps.Marker[] = [];

    customLoc = localizacionesCluster.filter((lo) => {
        return lo.getTitle() === agrupacion;
    });

    markerCluster.addMarkers(customLoc);
}

function showAllMarkers() {
    markerCluster.addMarkers(localizacionesCluster);
}