更新Google地圖中多個圈子的半徑？

Question

我有一張地圖，顯示了一個Circle，在我的位置陣列中，每組座標的半徑爲50英里。點擊時，我想要一系列按鈕來增加或減少地圖上每個圓的半徑。我現在的方式是，它只改變與數組中最後一個位置相關的圓的半徑。我明白爲什麼會發生這種情況（因爲Circle變量正在分配給for循環中的每個點），但我不確定如何更改它，以便更新每個圓的半徑。

var retailerCircle; 
 
var retailermap = { 
 
\t chicago: { 
 
\t \t coords: {lat: 41.878, lng: -87.629} 
 
\t }, 
 
\t newyork: { 
 
\t \t coords: {lat: 40.714, lng: -74.005} 
 
\t }, 
 
\t losangeles: { 
 
\t \t coords: {lat: 34.052, lng: -118.243} 
 
\t }, 
 
\t vancouver: { 
 
\t \t coords: {lat: 49.25, lng: -123.1} 
 
\t } 
 
}; 
 

 
function initMap() { 
 
\t // Create the map. 
 
\t var map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t zoom: 4, 
 
\t \t center: {lat: 41.878003, lng: -93.097702}, 
 
\t \t mapTypeId: 'terrain' 
 
\t }); 
 

 
\t for (var retailer in retailermap) { 
 
\t \t // Add the circle for this retailer to the map. 
 
\t \t retailerCircle = new google.maps.Circle({ 
 
\t \t \t strokeColor: '#FF0000', 
 
\t \t \t strokeOpacity: 0.8, 
 
\t \t \t strokeWeight: 2, 
 
\t \t \t fillColor: '#FF0000', 
 
\t \t \t fillOpacity: 0.35, 
 
\t \t \t map: map, 
 
\t \t \t center: retailermap[retailer].coords, 
 
\t \t \t radius: 80467.2 // 50 miles 
 
\t \t }); 
 
\t } 
 
} 
 

 
function updateRadius(circle, rad){ 
 
\t circle.setRadius(rad); 
 
} 
 

 
$(function() { 
 
\t $('button').click(function(e) { 
 
\t \t e.preventDefault(); 
 
\t \t updateRadius(retailerCircle, 160934); // 100 miles 
 
\t }); 
 
});

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 80%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="map"></div> 
 
<button>CLICK ME</button> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Answer 1

保持到所有的圈子的引用（在陣列將是一個選項），然後通過該數組迭代，更新的半徑。

function updateRadius(circle, rad) { 
    for (var i = 0; i < circles.length; i++) { 
    circles[i].setRadius(rad); 
    } 
} 

代碼片段：

var retailerCircle; 
 
var circles = []; 
 
var retailermap = { 
 
    chicago: { 
 
    coords: { 
 
     lat: 41.878, 
 
     lng: -87.629 
 
    } 
 
    }, 
 
    newyork: { 
 
    coords: { 
 
     lat: 40.714, 
 
     lng: -74.005 
 
    } 
 
    }, 
 
    losangeles: { 
 
    coords: { 
 
     lat: 34.052, 
 
     lng: -118.243 
 
    } 
 
    }, 
 
    vancouver: { 
 
    coords: { 
 
     lat: 49.25, 
 
     lng: -123.1 
 
    } 
 
    } 
 
}; 
 

 
function initMap() { 
 
    // Create the map. 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: { 
 
     lat: 41.878003, 
 
     lng: -93.097702 
 
    }, 
 
    mapTypeId: 'terrain' 
 
    }); 
 

 
    for (var retailer in retailermap) { 
 
    // Add the circle for this retailer to the map. 
 
    var retailerCircle = new google.maps.Circle({ 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     map: map, 
 
     center: retailermap[retailer].coords, 
 
     radius: 80467.2 // 50 miles 
 
    }); 
 
    circles.push(retailerCircle); 
 
    } 
 
} 
 

 
function updateRadius(circle, rad) { 
 
    for (var i = 0; i < circles.length; i++) { 
 
    circles[i].setRadius(rad); 
 
    } 
 
} 
 

 
$(function() { 
 
    $('button').click(function(e) { 
 
    e.preventDefault(); 
 
    updateRadius(retailerCircle, 160934); // 100 miles 
 
    }); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 80%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="map"></div> 
 
<button>CLICK ME</button> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>