他死了，吉姆：谷歌地图上可以绘制的圈数是否有内存限制？

Question

在美国的地图上，我被要求画出50,000个圆圈，每个圆圈的半径为5000码。

Lat-lon位置遍布全国各地，但这些圈子中有很多重叠。不透明度设为0.05;具有许多叠加圆的区域变得更不透明。

圈子开始出现，但大约30秒后Chrome崩溃，显示“他死了，吉姆”的消息。

Answer 1

关于错误消息：

根据Error: "He's Dead, Jim!"：

  

如果符合以下条件，您可能会在标签中看到“他死了，吉姆！”消息：

     

  
• 您没有足够的可用内存来运行该标签。计算机依靠内存来运行应用程序，扩展和程序。记忆不足   可能会导致它们运行缓慢或停止工作。
  
• 您使用Google Chrome的任务管理器，系统的任务管理器或命令行工具停止了流程。
  

由于您尝试渲染 50k 对象，因此显然会发生这种情况。为了渲染这么多的物体，我建议考虑Overlay approach。在这种情况下，性能可以大大提高，因为城市图标可以通过canvas元素而不是div元素呈现。

话虽如此，下面的例子演示了如何使用所描述的方法渲染多个城市（1000个城市）：

＆＃13;

＆＃13;

var overlay;
USCitiesOverlay.prototype = new google.maps.OverlayView();

function USCitiesOverlay(map) {
    this._map = map;
    this._cities = [];
    this._radius = 6;
    this._container = document.createElement("div");
    this._container.id = "citieslayer";
    this.setMap(map);
    this.addCity = function (lat, lng) {
        this._cities.push({position: new google.maps.LatLng(lat,lng)});
    };
}


USCitiesOverlay.prototype.createCityIcon = function (id,pos) {
    /*var cityIcon = document.createElement('div');
    cityIcon.setAttribute('id', "cityicon_" + id);
    cityIcon.style.position = 'absolute';
    cityIcon.style.left = (pos.x - this._radius) + 'px';
    cityIcon.style.top = (pos.y - this._radius) + 'px';
    cityIcon.style.width = cityIcon.style.height = (this._radius * 2) + 'px';
    cityIcon.className = "circleBase city";
    return cityIcon;*/

   
    var cityIcon = document.createElement('canvas');

    cityIcon.id = 'cityicon_' + id;
    cityIcon.width = cityIcon.height = this._radius * 2;
    cityIcon.style.width = cityIcon.width + 'px';
    cityIcon.style.height = cityIcon.height + 'px';
    cityIcon.style.left = (pos.x - this._radius) + 'px';  
    cityIcon.style.top = (pos.y - this._radius) + 'px'; 
    cityIcon.style.position = "absolute";

    var centerX = cityIcon.width / 2;
    var centerY = cityIcon.height / 2;
    var ctx = cityIcon.getContext('2d');
    ctx.fillStyle = 'rgba(160,16,0,0.6)';
    ctx.beginPath();
    ctx.arc(centerX, centerY, this._radius, 0, Math.PI * 2, true);
    ctx.fill();

    return cityIcon;
};    


USCitiesOverlay.prototype.ensureCityIcon = function (id,pos) {
    var cityIcon = document.getElementById("cityicon_" + id);
    if(cityIcon){
        cityIcon.style.left = (pos.x - this._radius) + 'px';
        cityIcon.style.top = (pos.y - this._radius) + 'px';
        return cityIcon;
    }
    return this.createCityIcon(id,pos);
};    



USCitiesOverlay.prototype.onAdd = function () {
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(this._container);
};



USCitiesOverlay.prototype.draw = function () {
    var zoom = this._map.getZoom();
    var overlayProjection = this.getProjection();

    var container = this._container;
    
    this._cities.forEach(function(city,idx){
        var xy = overlayProjection.fromLatLngToDivPixel(city.position);
        var cityIcon = overlay.ensureCityIcon(idx,xy);
        container.appendChild(cityIcon);    
    });
   
};

USCitiesOverlay.prototype.onRemove = function () {
    this._container.parentNode.removeChild(this._container);
    this._container = null;
};







function getRandomInterval(min, max) {
    return Math.random() * (max - min) + min;
}


function generateCityMap(count) {
    var citymap = [];

    var minPos = new google.maps.LatLng(49.25, -123.1);
    var maxPos = new google.maps.LatLng(34.052234, -74.005973);
    

    for(var i = 0; i < count;i++)
    {
       var lat = getRandomInterval(minPos.lat(),maxPos.lat());
       var lng = getRandomInterval(minPos.lng(),maxPos.lng());
       var population = getRandomInterval(10000,1000000);


       citymap.push({
          location: new google.maps.LatLng(lat, lng),
          population: population
       });

    }

    return citymap;
}




function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(37.09024, -95.712891),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    overlay = new USCitiesOverlay(map);
    overlay.addCity(40.714352, -74.005973);   //chicago
    overlay.addCity(40.714352, -74.005973);   //newyork
    overlay.addCity(34.052234, -118.243684);   //losangeles
    overlay.addCity(49.25, -123.1);   //vancouver

    var citymap = generateCityMap(1000);
    citymap.forEach(function(city){
          overlay.addCity(city.location.lat(), city.location.lng());   
    });    

}


google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>

＆＃13;

＆＃13;

＆＃13;