在谷歌地图上添加多个圆形

Question

我想在谷歌地图上绘制许多圆形（约1000个），位于不同的位置和大小，并将点击事件绑定到它们。但是这样多次调用new google.maps.Circle(parameters);会导致页面加载缓慢，有时甚至会永远挂起，因此我想找出更好/更快的方法来完成我尝试做的事情。

我看到有一种叫做kml图层的东西，但似乎没有任何简单的方法来绘制填充的圆形，而且我不确定是否仍然可以将单个圆形的点击事件绑定到每个图层中。

查看谷歌KML faq页面上的圆形解决方法，我不确定生成包含数千个类似圆形的KML文件是否会节省任何时间。

我也不知道如何生成此kml文件。

最后，请考虑我正在从数据库中获取我尝试绘制的圆，因此我必须为使用动态生成KML文件或每次从DB中添加或删除圆形时生成新文件，以使文件保持最新状态。

当然，如果还有其他选择，我很愿意听取！

- EvilAmarant7x

---

你是否想要构建一个热力图？如果是的话，只需在谷歌上搜索“Google Maps 热力图”，就会出现几个不同的库... - Hosemeyer

虽然这可能在未来有用，但我并不试图绘制热力图。只是一堆圆圈标识地图上的各个区域。 - EvilAmarant7x

Answer 1

通过Google Maps API v3 Group的帮助，我成功地实现了一个处理10,000个点的地图叠加层。诀窍在于使用画布瓷砖叠加层，它最小化了DOM元素的数量，换取了更简单/轻量级的POJsOs（普通的JavaScript对象）。

演示页面包含鼠标点击事件（仅适用于API v2）：http://notebook.kulchenko.com/maps/datamark
演示页面包含光标交换（适用于API v2和v3）：http://notebook.kulchenko.com/maps/gridmark

- Matt Ball

---

这对我也有帮助！现在我有了成千上万的画布标记，而不是成千上万的SVG标记。它飞快地运行！现在我只需要想办法对多边形做同样的处理，因为它会影响我的地图性能。 :( - kiradotee

Answer 2

这是另一个示例，演示如何使用覆盖方式在Google地图上呈现多个对象。由于对象数量增加（例如google.maps.Circle），性能可能会显著降低，因此建议使用canvas元素而不是div来呈现对象。 示例 该示例演示了如何呈现1k个城市对象。

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,population) {
        this._cities.push({position: new google.maps.LatLng(lat,lng),population: population});
    };
}


USCitiesOverlay.prototype.createCityIcon = function (id,pos,population) {
    
    var cityIcon = document.createElement('canvas');
    cityIcon.id = 'cityicon_' + id;
    //calculate radius based on poulation 
    this._radius = population / 100000;
    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,population) {
    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,population);
};    



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,city.population);
        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(100000,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(),city.population);   
    });    

}


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

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

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

- Vadim Gremyachev

Answer 3

忘记KML，自定义瓦片是正确的选择。

看看这些县地图： http://maps.forum.nu/v3/gm_customTiles.html（勾选“密度”框）。 和 http://maps.forum.nu/gm_main.html?lat=31.428663&lon=-110.830078&z=4&mType=10 （单击地图以获取县信息）

这些地图有3000多个多边形（而不是圆形），加载速度很快。第一个链接是API V3，第二个链接是API V2。 第二张地图（V2）具有单击事件。单击事件处理程序附加到地图本身，并向服务器发送带有单击的纬度/经度的AJAX调用。然后，服务器端脚本在数据库中查找此纬度/经度以确定单击了哪个县。

- Marcelo

---

我觉得那些链接已经失效了，很遗憾。:( - kiradotee