1

I have created a google map and inside that I am drawing multiple radius circles. The radius circles are drawn onclick of a button from outside the map. When there are 15-20 circles are to be drawn the code is working fine. But when the amount of circle goes up to 100 or more than that it takes lot of time. It also hangs up the browser. Is there anyway we can speed up while drawing the radius circles over the map.

Below is the code which I am using. I am looping through a python variable inside django template to draw the circles.

{% 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 %}
4

1 回答 1

0

Looks like the circles are hard coded in your page. Load them after the map is rendered via AJAX techniques. To prevent the map from "hanging" use setTimeout to give the browser CPU cycles to respond to the user.

于 2013-06-11T18:32:38.937 回答