标记加载时的事件

时间:2017-02-21 15:23:42

标签: javascript performance google-maps google-maps-api-3

我有25k标记添加到Google地图对象中。问题是进程非常慢(甚至使用markerClusters)。需要15秒才能将它们加载到地图上(js代码在2秒内完成执行,但需要额外的15秒aprox来显示地图中的标记)。 我想添加一个微调器,直到它完成所有标记的加载。你知道地图改变后会发生什么事吗?或类似的东西。 我尝试了没有运气的文档上的事件。

function loadPlaces(places, defaultOptions, clusterizarMarkers, clusterStyles) {
    locations = [];
    markers = [];

    for (var i = 0; i < places.length; i++) {

        var unPlace = places[i];
        transformPlace(unPlace);
        unPlace.colorLabelAlerta = getColorPorTipoDeCentro(unPlace.tipoCentro);
        (function () {
            function createMarkerOptions(place, clusterizarMarkers) {
                var posicion = new google.maps.LatLng(place.lat, place.lng);
                var markerOptions = {
                    position: posicion,
                    title: place.name
                };
                if (!clusterizarMarkers) {
                    markerOptions.map = map;
                }

                return markerOptions;
            }

            var location = {};
            location.place = unPlace;
            location.place.id = i;
            location.marker = new google.maps.Marker(createMarkerOptions(unPlace, clusterizarMarkers));
            markers.push(location.marker);
            var icon;
            if (unPlace.tipoCentro === "Centro 4G" && unPlace.diametro && unPlace.diametro > 0) {
                icon = "/myplaces-portlet/img/transparente.png";
            } else if (defaultOptions.iconGenerator) {
                icon = defaultOptions.iconGenerator(unPlace);
            } else if (unPlace.mapIcon) {
                icon = unPlace.mapIcon;
            }

            var iconImage = new Image();
            iconImage.src = icon;

            iconImage.onload = function () {
                location.marker.setIcon(icon);
            };
            iconImage.onerror = function () {
                location.marker.setIcon(defaultOptions.defaultIcon);
            };
            locations.push(location);

            google.maps.event.addListener(location.marker, 'click', function () {
                myplaces.util.ui.places.selecteById(location.place.id);
            });
        })();

        if (unPlace.tipoCentro === "Centro 4G" && unPlace.diametro && unPlace.diametro > 0) {
            //diametro 
            var populationOptions = {
                strokeColor: '#79B800',
                strokeOpacity: 0.6,
                strokeWeight: 1,
                fillColor: '#79B800',
                fillOpacity: 0.25,
                map: map,
                center: new google.maps.LatLng(unPlace.lat, unPlace.lng),
                //radius: Math.sqrt(antenas4g[antena].population) * 100
                radius: unPlace.diametro / 2
            };
            antenaArea = new google.maps.Circle(populationOptions);
            unPlace.circulo = antenaArea;
        }
    }
    if (clusterizarMarkers && markers.length) {
        // var mcOptions = {gridSize: 30, maxZoom: 15};
        var mcOptions = {
            styles: clusterStyles
        };
        mc = new MarkerClusterer(map, markers, mcOptions);
    }

}

0 个答案:

没有答案