谷歌地图调用google.maps.Circle画圆，循环内报map is not defined如何解决

你遇到的报错核心是map变量在循环执行时不在当前可访问的作用域内：

• 循环外创建第一个圆形radiusCircle时，map变量还在有效作用域中可以访问，但div_array_var判断逻辑和内部的for循环，大概率是在谷歌地图初始化完成的回调之外触发执行的，或者map是某个函数的局部变量，执行到循环逻辑时已经无法被访问。
• 除此之外你还存在两个隐藏问题：
  • 循环内圆形的经纬度写反了：lat字段你传入了经度值location_lon，lng字段传入了纬度值location_lat，即使map问题解决，圆形也会显示在错误位置。
  • radiusCircle3没有添加let/const变量声明，会默认挂载为全局变量，循环过程中会被反复覆盖，如果你后续需要操作这些圆形实例，会无法获取到之前创建的对象。

1. 调整map变量的作用域：
   • 如果map是在谷歌地图初始化的initMap回调中声明的局部变量，你可以将整个循环逻辑移到initMap函数内部，或者将map挂载为全局变量：window.map = new google.maps.Map(你的地图容器, 配置项)，保证所有执行位置都能访问到map。
2. 修正经纬度赋值错误，将循环内的center配置改为：

   center: { lat: clean_div_array_var[i].location_lat, lng: clean_div_array_var[i].location_lon }
   

3. 优化变量声明，如果你需要后续操作所有创建的分区圆形，可以用数组存储实例：

   // 循环外声明存储数组
   const divisionCircles = []
   // 循环内部
   const radiusCircle3 = new google.maps.Circle({
     // 你的配置项
   })
   divisionCircles.push(radiusCircle3)
   

4. 可以添加防御判断，避免异常报错：在创建圆形前先判断if (!map || !clean_div_array_var[i]) return;

const radiusCircle = new google.maps.Circle({
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35,
  map,
  center: { lat: alatitude, lng: alongitude },
  radius: aattendance_radius,
});

if (div_array_var && map) {
  const clean_div_array_var = [...new Set(div_array_var)];
  const divisionCircles = [];
  for (let i = 0; i < clean_div_array_var.length; i++) {
    const currentItem = clean_div_array_var[i];
    if (!currentItem) continue;
    const radiusCircle3 = new google.maps.Circle({
      strokeColor: "#FF00FF",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF00FF",
      fillOpacity: 0.35,
      map,
      // 修正经纬度顺序
      center: { lat: currentItem.location_lat, lng: currentItem.location_lon },
      radius: currentItem.attendance_radius,
    });
    divisionCircles.push(radiusCircle3);
  }
}

内容的提问来源于stack exchange，提问作者Axil