如何让Google Maps图例加载外部数据集并正常显示？

问题诊断 #

你的图例无法正常显示主要有两个核心原因：

1. 初始化时icons数组是空的，没有任何图例数据可以遍历生成项；
2. 图例生成代码在initMap里同步执行，而外部GeoJSONP数据是异步加载的，即便你想从数据中收集图例信息，此时数据还没返回，也无法获取到。

而你用内部数据数组时正常，是因为数据同步可用，可能你当时顺便填充了图例所需的信息，但换成异步外部数据源后，这个逻辑就失效了。

解决方案 #

既然你的标记分级规则（getCircle里的逻辑）是固定的，我们可以直接预定义图例的所有等级配置，不用依赖外部数据加载，这样图例就能独立生成，同时和地图上的标记样式完全匹配。

修改后的完整代码如下：

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: { lat: 27.964157, lng: -82.452606 },
    mapTypeControl: false,
    streetViewControl: false,
  });

  // 预定义图例等级，和getCircle中的分级逻辑严格对应
  var legendLevels = [
    { name: "<= 10", scale: 5, opacity: 1 },
    { name: "<= 100", scale: 10, opacity: 0.8 },
    { name: "<= 250", scale: 15, opacity: 0.6 },
    { name: "<= 500", scale: 20, opacity: 0.4 },
    { name: "<= 2000", scale: 25, opacity: 0.2 },
    { name: "> 2000", scale: 35, opacity: 0.2 }
  ];

  // 生成图例
  var legend = document.getElementById('legend');
  legendLevels.forEach(function(level) {
    var div = document.createElement('div');
    // 用模板字符串简化SVG拼接，避免转义错误
    var svg = `<svg viewBox="0 0 100 100" height="${level.scale}" width="${level.scale}" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="50" style="fill: green; stroke: white; stroke-width: 1;" opacity="${level.opacity}"/>
              </svg>`;
    div.innerHTML = `${svg} ${level.name}`;
    legend.appendChild(div);
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

  // 设置地图数据样式
  map.data.setStyle(function (feature) {
    var nctcount = feature.getProperty('count_of_nct_id');
    return { icon: getCircle(nctcount) };
  });

  // 加载外部GeoJSONP数据
  var script = document.createElement('script');
  script.src = 'https://trialscout.com/Scripts/landscapedata/tampadata_geojsonp.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

function getCircle(nctcount) {
  var nctamt = nctcount;
  if (nctamt <= 10) {
    return { path: google.maps.SymbolPath.CIRCLE, fillOpacity: 1, fillColor: 'green', scale: 5, strokeColor: 'white', strokeWeight: .5, name: "<= 10" };
  } else if (nctamt <= 100) {
    return { path: google.maps.SymbolPath.CIRCLE, fillOpacity: .8, fillColor: 'green', scale: 10, strokeColor: 'white', strokeWeight: .5, name: "<= 100" };
  } else if (nctamt <= 250) {
    return { path: google.maps.SymbolPath.CIRCLE, fillOpacity: .6, fillColor: 'green', scale: 15, strokeColor: 'white', strokeWeight: .5, name: "<= 250" };
  } else if (nctamt <= 500) {
    return { path: google.maps.SymbolPath.CIRCLE, fillOpacity: .4, fillColor: 'green', scale: 20, strokeColor: 'white', strokeWeight: .5, name: "<= 500" };
  } else if (nctamt <= 2000) {
    return { path: google.maps.SymbolPath.CIRCLE, fillOpacity: .2, fillColor: 'green', scale: 25, strokeColor: 'white', strokeWeight: .5, name: "<= 2000" };
  } else {
    return { path: google.maps.SymbolPath.CIRCLE, fillOpacity: .2, fillColor: 'green', scale: 35, strokeColor: 'white', strokeWeight: .5, name: "> 2000" };
  }
}

function tslandscape_callback(response) {
  map.data.addGeoJson(response);
}

修改说明 #

1. 预定义图例等级：创建legendLevels数组，把getCircle里的每个分级的名称、缩放比例、透明度都整理进来，保证图例和地图标记的样式完全一致。
2. 简化图例生成逻辑：用forEach遍历预定义的等级，直接生成SVG图标，避免原来的字符串转义混乱，同时确保每个图例项的大小、透明度和对应等级的标记匹配。
3. 调整代码顺序：把图例生成的代码提前，不用等外部数据加载完成就能显示，提升用户体验。
4. 修复SVG渲染问题：使用模板字符串来拼接SVG代码，可读性更强，也避免了转义错误。

这样修改后，不管外部数据是否加载完成，图例都会正常显示，而且和地图上的分级圆形标记完全对应。

内容的提问来源于stack exchange，提问作者M. Straw