Javascript 如何使用外部数据集填充地图图例？

我试图使用外部数据集文件显示带有大小圆圈的地图图例，但图例未显示所需的实际信息

如果我在JS代码中创建一个数据数组，这似乎是可行的，但我需要它来处理从中提取的.JS文件

我正在使用的JavaScript如下所示：

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,
    //    mapTypeId: 'terrain',
    //     disableDefaultUI: true,
    //      gestureHandling: 'none',
    //          zoomControl: false,


});



var script = document.createElement('script');

script.src = 'https://trialscout.com/Scripts/landscapedata/tampadata_geojsonp.js';
document.getElementsByTagName('head')[0].appendChild(script);

map.data.setStyle(function (feature) {
    var nctcount = feature.getProperty('count_of_nct_id');        
    return {
        icon: getCircle(nctcount)
    };
});


var icons = [];

var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var scale = type.scale;
var opacity = type.fillOpacity;
var div = document.createElement('div');
div.innerHTML = "<img src='data:image/svg+xml;utf8,<svg viewBox=\"0 0 100 100\" height=\"" + 8 * scale / 8 + "\" width=\"" + 8 * scale / 8 + "\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill: green; stroke: white; stroke-width: 1;\" opacity=\"" + opacity + "\"/></svg>'> " + name;
legend.appendChild(div);
}

  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

}


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);
}

var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：{
拉脱维亚：27.964157，
液化天然气：-82.452606
},
mapTypeControl:false，
街景控制：错误，
//mapTypeId:'地形'，
//disableDefaultUI:true，
//手势处理：“无”，
//动物控制：错误，
});
var script=document.createElement（'script'）；
script.src=https://trialscout.com/Scripts/landscapedata/tampadata_geojsonp.js';
document.getElementsByTagName（'head'）[0].appendChild（脚本）；
map.data.setStyle（函数（特性）{
var nctcount=feature.getProperty（'count\u of'nct\u id'）；
返回{
图标：getCircle（nctcount）
};
});
var图标=[]；
var legend=document.getElementById（'legend'）；
用于（变量输入图标）{
变量类型=图标[键]；
var name=type.name；
var icon=type.icon；
var-scale=type.scale；
var opacity=type.fillOpacity；
var div=document.createElement（'div'）；
div.innerHTML=“”>“+名称；
图例.附件（部门）；
}
map.controls[google.maps.ControlPosition.RIGHT\u BOTTOM].push（图例）；
}
函数getCircle（nctcount）{
var nctamt=nctcount；
if（nctamt一个选项是使用我的答案中的代码，并创建一个创建固定图例的函数（而不是尝试从数据动态生成它）


您很好地将问题分解并隔离为“它与X（数组daya）一起工作，但我需要以X的格式获取Y（某些文件？？），但我无法检索Y”---然而，你的问题有很多额外的漏洞。我需要花很长时间来检查你的代码，找出X的格式，以及为什么你不能得到Y，以及你是如何试图得到Y的---所以试着把这个问题隔离开来。如果你的外部数据真的是
js
文件而不是一个JSON文件，您需要设置一个服务器端请求，然后将数据发送给您，或者让您的服务器说可以从域外提取脚本（请参阅CORS）.但这样做基本上是对安全问题敞开了大门，因为你在外面并不拥有安全问题domain@CodyG.我确实拥有这个外部域。它是一个geojson.js文件。代码中有指向它的链接。数据正确地显示在地图上，但我无法根据getCircle函数中指定的比例在图例中显示圆圈ion.initMap可能是在加载geojson.js文件中的数据之前调用的。是否设置了调试日志/点以查看数据在需要时是否可用？数据正在填充映射，因此正在加载。我只需要根据getCircle函数中的信息填充图例。
function makeLegend(map) {
  var legendmap = {
    scale1: {population: 8},
    scale2: {population: 80},
    scale3: {population: 200},
    scale4: {population: 450},
    scale5: {population: 1900},
    scale6: {population: 5000}
  };
  var icons = [];
  // Construct the circle for each value in legendmap.
  // Note: We scale the area of the circle based on the population.
  for (var entry in legendmap) {
    // Add the circle for this entry to the map.
    var icon = getCircle(legendmap[entry].population);
    if (!icons[icon.scale])
      icons[icon.scale] = icon;
  }

  var legend = document.getElementById('legend');
  for (var key in icons) {
    var type = icons[key];
    var name = type.name;
    var icon = type.icon;
    var scale = type.scale;
    var opacity = type.fillOpacity;
    var div = document.createElement('div');
    div.innerHTML = "<img src='data:image/svg+xml;utf8,<svg viewBox=\"0 0 100 100\" height=\"" + 8 * scale / 8 + "\" width=\"" + 8 * scale / 8 + "\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill: green; stroke: white; stroke-width: 1;\" opacity=\"" + opacity + "\"/></svg>'> " + name;
    legend.appendChild(div);
  }
  // add the created legend to the map
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}