3

我有一个动态生成的对象，如下所示：

colorArray = { 
    AR: "#8BBDE1", 
    AU: "#135D9E", 
    AT: "#8BBDE1",
    ... }

我正在尝试在调用插件期间通过使用此插件和“颜色”属性来为地图着色。像这样：

$('#iniDensityMap').vectorMap({
    backgroundColor: '#c2e2f2',
    colors: colorArray,
    ... (some other params)
});

但它不会在国家/地区着色。当我硬编码它时，它工作正常 - 但它必须为这个项目动态生成，所以这样的东西对我不起作用（尽管它确实为地图着色）：

$('#iniDensityMap').vectorMap({
    backgroundColor: '#c2e2f2',
    colors: { AR: "#8BBDE1", AU: "#135D9E", AT: "#8BBDE1" },
    ... (some other params)
});

我已经在插件中充分追踪了这个问题，发现它与这个循环有关：

setColors: function(key, color) {
  if (typeof key == 'string') {
    this.countries[key].setFill(color);
  } else {

    var colors = key; //This is the parameter passed through to the plugin

    for (var code in colors) {

      //THIS WILL NOT GET CALLED

      if (this.countries[code]) {
        this.countries[code].setFill(colors[code]);
      }
    }
  }
},

我也尝试过colorArray在插件之外自己迭代对象，我遇到了同样的问题。for ( var x in obj )中的任何内容都不会触发。我还注意到colorArray.length返回undefined。另一个重要的注意事项是，我var colorArray = {};在单独的调用中进行了实例化，试图确保它位于全局范围内并且能够被操纵。

我认为问题是：

  1. 我动态填充对象的方式 - colorArray[cCode] = cColor;（在 jQuery .each 调用中）
  2. 我再次混淆了javascript中Arrays()和Objects()之间的区别
  3. 也许这是一个范围问题？
  4. 以上所有内容的某种组合。

编辑#1：我已将关于 Firebug 控制台中的对象的附加问题移至新帖子HERE。这个问题比我在这里询问的底层 JS 问题更具体地涉及 Firebug。

编辑#2：附加信息 这是我用来动态填充对象的代码：

function parseDensityMapXML() {
$.ajax({
    type: "GET",
    url: "media/XML/mapCountryData.xml",
    dataType: "xml",
    success: function (xml) {
        $(xml).find("Country").each(function () {
            var cName = $(this).find("Name").text();
            var cIniCount = $(this).find("InitiativeCount").text();
            var cUrl = $(this).find("SearchURL").text();
            var cCode = $(this).find("CountryCode").text();

            //Populate the JS Object
            iniDensityData[cCode] = { "initiatives": cIniCount, "url": cUrl, "name": cName };
            //set colors according to values of initiatives count
            colorArray[cCode] = getCountryColor(cIniCount);
        });
    }
});
} //end function parseDensityMapXML();

然后在页面上其他地方的复选框的单击事件上调用此函数。对象iniDensityData和colorArray在 html 文件的头部声明 - 希望将它们保持在全局范围内：

<script type="text/javascript">
    //Initialize a bunch of variables in the global scope
    iniDensityData = {};
    colorArray = {};
</script>

最后，这是正在读取的 XML 文件的片段：

<?xml version="1.0" encoding="utf-8"?>
<icapCountryData>
  <Country>
    <Name>Albania</Name>
    <CountryCode>AL</CountryCode>
    <InitiativeCount>7</InitiativeCount>
    <SearchURL>~/advance_search.aspx?search=6</SearchURL>
  </Country>
  <Country>
    <Name>Argentina</Name>
    <CountryCode>AR</CountryCode>
    <InitiativeCount>15</InitiativeCount>
    <SearchURL>~/advance_search.aspx?search=11</SearchURL>
  </Country>
  ... and so on ...
</icapCountryData>
4

1 回答 1

3

解决了！最初，我正在调用该函数parseDensityMapXML()，然后在它调用另一个函数后立即调用另一个函数loadDensityMapXML()，该函数获取在第一个函数中动态创建的对象并迭代它。问题是，它不是作为第一个函数的回调调用的，所以在对象构建之前就被触发了。

为了解决这个问题，我刚刚修改了上面提到的第一个函数，以便在.each()完成创建对象后调用第二个函数：

function parseDensityMapXML() {
$.ajax({
    type: "GET",
    url: "media/XML/mapCountryData.xml",
    dataType: "xml",
    success: function (xml) {
        $(xml).find("Country").each(function () {
            var cName = $(this).find("Name").text();
            var cIniCount = $(this).find("InitiativeCount").text();
            var cUrl = $(this).find("SearchURL").text();
            var cCode = $(this).find("CountryCode").text();

            //Populate the JS Object
            iniDensityData[cCode] = { "initiatives": cIniCount, "url": cUrl, "name": cName };
            //set colors according to values of initiatives count
            colorArray[cCode] = getCountryColor(cIniCount);
        });

        /* and then call the jVectorMap plugin - this MUST be done as a callback
           after the above parsing.  If called separately, it will fire before the
           objects iniDensityData and colorArray are created! */
        loadDensityMapXML();
    }
});
} //end function parseDensityMapXML();
于 2012-08-01T18:32:10.477 回答