Google Maps Add Multiple Circles

Question

I want to know what its the best way to add differents option that shows ranges of distances .I made this Range of distance (Circle)

I generate the range using circle

        var circle = new google.maps.Circle({
          map: this.map,
          radius: 16093,    // 10 miles in metres 16093
          fillColor: '#E6E6E6',
          fillOpacity: 0.0 ,
          strokeOpacity : 0.1,
          strokeWeight: 1,
          strokeWidth:1
        });
        circle.bindTo('center', marker_cat, 'position');

That js show how to add a circle range of 10 miles , and now i want to add other circles showing others types of range like 20 miles.

Could someone tell me where i can found a tutorial to add differents circles showed or hidden depending his properties?

Answer 1

Bill, the radius paramater is the size of the circle, if you look at the comment it says '10 miles in metres 16093' so you need to work back 20 miles to meters and the same goes for any other distance you need to mark/display on the map. 1609.34 m is 1 mile.

Answer 2

Not sure this will suit your needs, but it is a generic function that will let you set/change the circle radius of any defined circle, with the benefit of also being able to pass it the unit to use.

function setCircleSize(circle_name, radius, unit){
    var radius_meters = 0;
    if (unit = 'm')  radius_meters = parseFloat(radius);
    if (unit = 'km') radius_meters = parseFloat(radius) * 1000;
    if (unit = 'mi') radius_meters = parseFloat(radius) * 1609.34;
    circle_name.setOptions({radius:radius_meters});
}

The first argument is the variable name of the circle, the second argument is the value of the radius, and the unit used is passed as the last argument; 'm' for meters, 'km' for kilometers, or 'mi' for miles. This can be used as shown with your defined circle in the OP.

setCircleSize('circle', 10, 'mi');  // Set 'circle' radius to 10 miles

Next a generic function to toggle the visibility of any circle on your map

function toggleCircle(circle_name){
    if (circle_name == null || undefined || '') return;
    else {
        if (circle_name.getVisible()) circle_name.setVisible(false);
        else circle_name.setVisible(true);
    }
}

So to toggle the visibility on or off of the circle in your OP...

toggleCircle(circle);

Answer 3

嗨比尔检查此教程生成圈子