问题
I am trying to measure the COMPLETE time (including adding the objects to the DOM) for adding a number of markers to a google map instance, but it does not really work the way I expected. Here is the function I have:
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;
}
I am testing this code inside a WebView on my Android device. Also tested the same in my browser. Here is a link where you can check it out - http://www.debelacite.com/test/gmap_benchmark.html.
So everything works, the markers are shown, but the time calculated does not really correspond to the real time for adding the markers. For example to show 100 markers the result I get is usually from 50 to 100 milliseconds, but until the markers appear on the screen at least 1-2 seconds pass. How can I get the time for the whole process? I have looked for proper events in the API, but none seem to help :( Am I missing something?
回答1:
I would modify your function like this:
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;
};
Consider the following example:
<!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 ----------------------
To see that open two tabs. In one tab you do whatever you want and in the other tab you run your application (or my modified demo) and you open the Developer Tools and undock it. Then you go back on you another tab (where you're doing what you want). Like that the browser is showing another page but not the page with the demo.
Then you go to the undocked developer tools window and refresh the page (press F5 key). You look at the debug and you wait for the "Leaving addMarkers function...." message, you wait as long as you want so that you know all the possible asynchronouly loaded has finished and then you go to the tab with the demo.
You will see as the markers somehow were asynchronously loaded, but it is only the browser rendering them.
Only it seems to me like that, I'm not sure of that.
来源：https://stackoverflow.com/questions/20482647/measure-complete-time-of-adding-showing-an-array-of-markers-to-google-maps-v3