Question

我正在尝试测量COMPLETE时间（包括将对象添加到DOM），以便为google地图实例添加大量标记，但它并不像我预期的那样真正起作用。这是我的功能：

    function addMarkers(count) {

        // map is the google.maps.Map object


        var bounds = map.getBounds();
        var northEast = bounds.getNorthEast();
        var southWest = bounds.getSouthWest();
        var minLat = Math.min(northEast.lat(), southWest.lat());
        var maxLat = Math.max(northEast.lat(), southWest.lat());
        var minLng = Math.min(northEast.lng(), southWest.lng());
        var maxLng = Math.max(northEast.lng(), southWest.lng());

        var latDifference = maxLat - minLat;
        var lngDifference = maxLng - minLng;
        var latLngArray = new Array();

        for (var i = 0; i < count; i++) {
            var lat = minLat + Math.random() * latDifference;
            var lng = minLng + Math.random() * lngDifference;
            var latLng = new google.maps.LatLng(lat, lng);
            latLngArray.push(latLng);                
        }


        /////////////// MEASUREMENTS STARTING FROM HERE ////////////////////

        var startTime = new Date().getTime();
        for (var i = 0; i < latLngArray.length; i++) {
            var marker = new google.maps.Marker({
               position: latLngArray[i]
            });
            marker.setMap(map);
        }

        var endTime = new Date().getTime();
        return endTime - startTime;
    }

我在Android设备上的WebView中测试此代码。也在我的浏览器中测试相同。这是一个可以查看的链接 - http://www.debelacite.com/test/gmap_benchmark.html。

所以一切正常，标记显示，但计算的时间并不真正对应于添加标记的实际时间。例如，为了显示100个标记，我得到的结果通常是50到100毫秒，但是直到标记出现在屏幕上至少1-2秒才通过。我怎样才能获得整个过程的时间？我在API中寻找了适当的事件，但似乎都没有帮助:(我错过了什么吗？

Answer 1

我会像这样修改你的功能：

function addMarkers(count) {
    // map is the google.maps.Map object
    var bounds = map.getBounds();
    var northEast = bounds.getNorthEast();
    var southWest = bounds.getSouthWest();
    var minLat = Math.min(northEast.lat(), southWest.lat());
    var maxLat = Math.max(northEast.lat(), southWest.lat());
    var minLng = Math.min(northEast.lng(), southWest.lng());
    var maxLng = Math.max(northEast.lng(), southWest.lng());

    var latDifference = maxLat - minLat;
    var lngDifference = maxLng - minLng;
    var latLngArray = new Array();

    for (var i = 0; i < count; i++) {
        var lat = minLat + Math.random() * latDifference;
        var lng = minLng + Math.random() * lngDifference;
        var latLng = new google.maps.LatLng(lat, lng);
        latLngArray.push(latLng);
    }


    /////////////// MEASUREMENTS STARTING FROM HERE ////////////////////

    var chrono = new Chrono();
    google.maps.event.addListener(map, 'tilesloaded', function() {
        chrono.stop();
    });
    google.maps.event.addListener(chrono, 'chrono_stops', function (e) {
        var result = e.totalTime();
        console.log(result);
    });

    chrono.start();
    for (var i = 0; i < latLngArray.length; i++) {
        var marker = new google.maps.Marker({
            position: latLngArray[i]
        });
        marker.setMap(map);
    }
}    
function Chrono() {
    this.startTime;
    this.endTime;
}
Chrono.prototype.start = function() {
    this.startTime = new Date().getTime();
};
Chrono.prototype.stop = function() {
    this.endTime = new Date().getTime();
    google.maps.event.trigger(this, "chrono_stops", this);
};
Chrono.prototype.totalTime = function() {
    return this.endTime - this.startTime;
};

考虑以下示例：

<!DOCTYPE html>
<html>
<head>    
    <title>Chrono demo</title>
    <style type="text/css">
        html, body{ height: 100%; height: 100%; margin: 0; padding: 0; }
        #map-container{ height: 100%; width: 100%; min-width:500px; min-height:300px; }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>    
</head>
<body>
    <div id="map-container"></div>
    <script>
        var map, firstBoundChangedListener,  markers =[];

        function Chrono() {
            this.startTime;
            this.endTime;
        }
        Chrono.prototype.start = function () {
            this.startTime = new Date().getTime();
        };
        Chrono.prototype.stop = function () {
            this.endTime = new Date().getTime();
            google.maps.event.trigger(this, "chrono_stops", this);
        };
        Chrono.prototype.totalTime = function () {
            return this.endTime - this.startTime;
        };

        function addMarkers(count) {
            console.log("Entering addMarkers function...");
            // map is the google.maps.Map object
            var bounds = map.getBounds();
            var northEast = bounds.getNorthEast();
            var southWest = bounds.getSouthWest();
            var minLat = Math.min(northEast.lat(), southWest.lat());
            var maxLat = Math.max(northEast.lat(), southWest.lat());
            var minLng = Math.min(northEast.lng(), southWest.lng());
            var maxLng = Math.max(northEast.lng(), southWest.lng());

            var latDifference = maxLat - minLat;
            var lngDifference = maxLng - minLng;
            var latLngArray = new Array();

            for (var i = 0; i < count; i++) {
                var lat = minLat + Math.random() * latDifference;
                var lng = minLng + Math.random() * lngDifference;
                var latLng = new google.maps.LatLng(lat, lng);
                latLngArray.push(latLng);
            }

            /////////////// MEASUREMENTS STARTING FROM HERE ////////////////////

            var chrono = new Chrono();

            google.maps.event.addListener(chrono, 'chrono_stops', function (e) {
                var result = e.totalTime();
                console.log(result);
            });

            chrono.start();
            for (var i = 0; i < latLngArray.length; i++) {
                var marker = new google.maps.Marker({
                    position: latLngArray[i],
                    title: "Marker: " + i
                });
                markers.push(marker);
                google.maps.event.addListener(marker, "map_changed", function () {
                    console.log("map_changed");
                });
                marker.setMap(map);
            }
            chrono.stop();
            console.log("Leaving addMarkers function...");
        }

        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 8,
                center: latlng
            };
            map = new google.maps.Map(document.getElementById('map-container'), mapOptions);
            firstBoundChangedListener = google.maps.event.addListener(map, "bounds_changed", function () {
                if (firstBoundChangedListener) google.maps.event.removeListener(firstBoundChangedListener);

                addMarkers(10000);
            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>
</html>

---------------------- EDITED ----------------------

要查看打开两个标签页。在一个选项卡中，您可以执行任何操作，在另一个选项卡中运行应用程序（或我修改过的演示），然后打开开发人员工具并取消停靠。然后你再回到你的另一个标签上（你正在做你想做的事）。就像那样浏览器显示另一个页面而不是带有演示的页面。

然后转到未停靠的开发人员工具窗口并刷新页面（按F5键）。你查看调试并等待“离开addMarkers函数....”消息，你等待所需的时间，以便你知道所有可能的异步加载已经完成，然后你转到带有演示即可。

您将看到标记以某种方式被异步加载，但只有浏览器才会呈现它们。

只有在我看来，我不确定。

测量向谷歌地图v3添加（显示）一系列标记的完整时间

1 个答案: