Веб-страница зависает, пока обновляются маркеры карты Google API. - PullRequest
Новая
       7

Веб-страница зависает, пока обновляются маркеры карты Google API.

0 голосов
/ 15 апреля 2020

У меня есть веб-сайт, который использует API Google Maps. Карта загружает большое количество маркеров. У пользователя есть раздел фильтров, который при изменении вызывает API, который возвращает новый список маркеров, которые будут нанесены на график. Карта загружается синхронно. Моя проблема в том, что когда маркеры обновляются и рисуются на карте, остальная часть страницы зависает, пока это не будет завершено. Есть ли способ предотвратить это?

Вот код: Html Файл: 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=@ViewBag.GoogleMapsApiKey&libraries=places,geometry"></script>
<script src="/myScript.js"></script>

myScript. js: 

var map = new google.maps.Map(document.getElementById("myMap"), {
    center: { lat: 0.0, lng: 0.0 },
    zoom: 10,
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: false,
});
var standardMarkers = ARRAY OF MARKERS HERE
loadGoogleMap(standardMarkers)
function loadGoogleMap(standardMarkers) {

    const bounds = new window.google.maps.LatLngBounds();

    for (let i = 0; i < standardMarkers.length; i++) {
        let location = standardMarkers[i];
        const image = {
            url: baseUrl + "/lib/Google-Maps-marker-clustering/F57E42.png",
            size: new google.maps.Size(26, 36),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(13, 36),
        };
        const marker = new google.maps.Marker({
            map: map,
            icon: image,
            position: { lat: parseFloat(location.latitude), lng: parseFloat(location.longitude) },
            title: location.name,
            zIndex: 10,
            storeID: location.ID
        });
        mapMarkers.push(marker);

        bounds.extend({ lat: parseFloat(newMarkers[i].latitude), lng: parseFloat(newMarkers[i].longitude) });

        marker.addListener("click", function () {
            // Remove all new markers
            deleteSomeMarkers();

            // Remove any existing circle
            if (circle) {
                circle.setMap(null);
            }

            // Add new circle
            circle = new google.maps.Circle({
                map: map,
                radius: convertMilesToMeters(parseFloat($("#radius").val())),
                strokeColor: "#F2A900",
                strokeWeight: 2,
                fillOpacity: 0
            });
            circle.bindTo("center", this, "position");

            // Zoom Map
            map.fitBounds(circle.getBounds());
            map.setCenter(marker.getPosition());

            // Get more markers
            let requestData = {
                Latitude: marker.position.lat(),
                Longitude: marker.position.lng(),
                Radius: $("#radius").val(),
            };
            new ApiCall("GET", `<CALL TO API HERE REDACTED FOR STACKOVERFLOW>`, null, processMoreMarkers).call();

        });
    }

    // Adjust the zoom level after calling fitBounds()
    google.maps.event.addListenerOnce(map, "zoom_changed", function () {
        if (this.getZoom() > 12) {
            this.setZoom(12);
        }
    });

    // Recenter the map to include all pins
    map.fitBounds(bounds);
}
...