Googleマップを作成し、その中に複数の半径の円を描いています。半径の円は、マップの外側からボタンをクリックすると描画されます。15 ~ 20 個の円が描画される場合、コードは正常に機能しています。しかし、円の数が100以上になると、かなり時間がかかります。ブラウザもハングアップします。マップ上に半径円を描画しながらスピードアップできる方法はありますか。
以下は私が使用しているコードです。django テンプレート内の python 変数をループして円を描画しています。
{% for key, val in info.items %}
var radius = parseFloat(5) * parseFloat(1609.3)
var lat = '{{val.latitude}}'
var long = '{{val.longitude}}'
circle_latlng = new google.maps.LatLng(lat, long)
var circle = {
strokeColor: "#ff0000",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#ff0000",
fillOpacity: 0.20,
map: map,
center: circle_latlng,
radius: radius,
zIndex: 5
};
var drawCirle = new google.maps.Circle(circle);
{% endfor %}