谷歌地图Javascript API问题画多个圆圈

因此，我尝试使用以下代码绘制多个圆心不同、半径不同（半径？）的圆：

var citymap = {
     chicago: {
         loc : "Chicago, IL",
         center: {lat: 40, lng: -70},
         shootings: 140000
     },
     newyork: {
         loc : "New York, NY",
         center: {lat: 40, lng: -70},
         shootings: 80000
     },
     losangeles: {
        loc : "Los Angeles, CA",
        center: {lat: 40, lng: -70},
        shootings: 40000
     },
};

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.14, lng: -98.1},
    zoom: 5
});

for (var city in citymap) {
    var geocoder =  new google.maps.Geocoder();
    geocoder.geocode( { 'address': citymap[city].loc}, 
          function(results, status) {
              citymap[city].center = { 
                  lat : results[0].geometry.location.lat(),
                  lng : results[0].geometry.location.lng()
              }

              // Add the circle for this city to the map.
              var cityCircle = new google.maps.Circle({
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: '#FF0000',
                  fillOpacity: 0.5,
                  map: map,
                  center: citymap[city].center,
                  radius: citymap[city].shootings 
              });    
           }); 
    }

---

我觉得这应该是可行的，但是所有的圆都是用相同的半径画的。如果我把cityCircle放在geocoder函数之外，它就会画出半径不同但都在同一点上的圆。有人知道这里有什么问题吗？

地理编码器是异步的。当回调函数运行时，循环已完成，

city

保留为最后一个值，因此所有圆都得到最后一个条目的半径

一种修复方法是使用函数闭包：

function createCircleFromGeocode(city) {
  geocoder.geocode({
    'address': citymap[city].loc
  }, function(results, status) {
    citymap[city].center = {
      lat: results[0].geometry.location.lat(),
      lng: results[0].geometry.location.lng()
    }
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].shootings
    });
  });
} 

代码片段：

函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{
拉脱维亚：39.14，
液化天然气：-98.1
},
缩放：3
});
用于（城市地图中的var城市）{
createCircleFromGeocode（城市）；
}
}
函数createCircleFromGeocode（城市）{
地理编码({
“地址”：城市地图[城市].loc
}，功能（结果、状态）{
城市地图[城市].中心={
lat:结果[0]。几何体。位置。lat（），
lng:results[0]。geometry.location.lng（）
}
//将该城市的圆圈添加到地图中。
var cityCircle=new google.maps.Circle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
填充不透明度：0.5，
地图：地图，
中心：城市地图[城市]。中心，
半径：城市地图[城市]。射击
});
});
}
var geocoder=new google.maps.geocoder（）；
var citymap={
芝加哥：{
loc：“伊利诺伊州芝加哥”，
中心：{
拉脱维亚：40，
液化天然气：-70
},
枪击事件：14万
},
纽约：{
loc:“纽约，纽约”，
中心：{
拉脱维亚：40，
液化天然气：-80
},
枪击事件：8万起
},
洛杉矶：{
loc:“加利福尼亚州洛杉矶”，
中心：{
拉脱维亚：40，
液化天然气：-100
},
枪击事件：4万起
},
};
var映射；
google.maps.event.addDomListener（窗口'load'，initMap）
html，
身体，
#地图{
身高：100%；
保证金：0；
填充：0；
}
地理编码器是异步的。当回调函数运行时，循环已完成，
city
保留为最后一个值，因此所有圆都得到最后一个条目的半径

一种修复方法是使用函数闭包：

function createCircleFromGeocode(city) {
  geocoder.geocode({
    'address': citymap[city].loc
  }, function(results, status) {
    citymap[city].center = {
      lat: results[0].geometry.location.lat(),
      lng: results[0].geometry.location.lng()
    }
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].shootings
    });
  });
} 


代码片段：


函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{
拉脱维亚：39.14，
液化天然气：-98.1
},
缩放：3
});
用于（城市地图中的var城市）{
createCircleFromGeocode（城市）；
}
}
函数createCircleFromGeocode（城市）{
地理编码({
“地址”：城市地图[城市].loc
}，功能（结果、状态）{
城市地图[城市].中心={
lat:结果[0]。几何体。位置。lat（），
lng:results[0]。geometry.location.lng（）
}
//将该城市的圆圈添加到地图中。
var cityCircle=new google.maps.Circle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
填充不透明度：0.5，
地图：地图，
中心：城市地图[城市]。中心，
半径：城市地图[城市]。射击
});
});
}
var geocoder=new google.maps.geocoder（）；
var citymap={
芝加哥：{
loc：“伊利诺伊州芝加哥”，
中心：{
拉脱维亚：40，
液化天然气：-70
},
枪击事件：14万
},
纽约：{
loc:“纽约，纽约”，
中心：{
拉脱维亚：40，
液化天然气：-80
},
枪击事件：8万起
},
洛杉矶：{
loc:“加利福尼亚州洛杉矶”，
中心：{
拉脱维亚：40，
液化天然气：-100
},
枪击事件：4万起
},
};
var映射；
google.maps.event.addDomListener（窗口'load'，initMap）
html，
身体，
#地图{
身高：100%；
保证金：0；
填充：0；
}

工作起来很有魅力。谢谢你的帮助！工作得很有魅力。谢谢你的帮助！