logo标签列表

随机着色的美国地图使用JVector

javascriptdictionaryjvectormap
7

我在使用JVector API编写美国地图时遇到了问题，希望能够随机给每个州分配颜色。以下是代码：

<html>
  <script src="scripts/jquery-1.8.2.js"></script>
  <script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="scripts/jquery-jvectormap-us-aea-en.js"></script>
<body>
  <div  id="us-map" style="position: relative;   width: 800px; height: 600px"></div>
  <script>

  <!--// I commented out this piece of script. It works fine. This is a test trial to load the map
    // $(function(){
    // $('#us-map').vectorMap({map: 'us_aea_en'});
    // });
    -->

    <!-- I have issues with the following function -->
/*it does not even load the map. What it should do is to generate random colors
* for the map as the "update" button is pressed 
*/
$(function(){
  var palette = ['#66C2A5', '#FC8D62', '#8DA0CB', '#E78AC3', '#A6D854'];
      generateColors = function(){
        var colors = {},
            key;

        for (key in map.regions) {
          colors[key] = palette[Math.floor(Math.random()*palette.length)];
        }
        return colors;
      },
      map;

  map = new jvm.USMap({
    map: 'us_aea_en',
    container: $('#map'),
    series: {
      regions: [{
        attribute: 'fill'
      }]
    }
  });
  map.series.regions[0].setValues(generateColors());
  $('#update-colors-button').click(function(e){
    e.preventDefault();
    map.series.regions[0].setValues(generateColors());
  });
})
    </script>
    </div>
  </body>
</html>

这是我的脚本文件夹链接，里面存放着 .js 文件。点击这里进行下载。 function() 函数有什么问题吗？
您尝试过不使用“随机颜色”函数加载地图吗？ - CHEBURASHKA
@Kamil 是的，我已经在上面的代码块中注释掉了它。你可以复制整个代码并下载“scripts”文件夹，然后尝试运行它。你会发现，如果你取消对简单加载地图的代码的注释，并注释掉“随机颜色”函数，它将正常工作。地图可以正常加载。你能帮我处理一下“随机颜色”函数吗？ - Buras
为什么在generateColors()的末尾有', map;'？ - Ringo
你的问题使用了来自 http://jvectormap.com/examples/random-colors/ 的代码。不幸的是，他们的示例缺少一些内容，因此您需要直接从页面源代码中复制/粘贴。我更新了我的答案以反映正确的代码。 - Menelaos
@Ringo因为这是一个变量声明，声明了一个函数和一个空变量，所以它有'map'。就像在C/Java中你会写Object a,b,c,d,e一样，只不过这种情况下它是在函数定义之后被添加的，这是我第一次看到这样的用法。 - Menelaos
1个回答
9

您的问题与直接从http://jvectormap.com/examples/random-colors/复制的代码相关

使随机美国地图工作的代码如下：

从源代码中提取，只进行了（从源代码中提取，只更改了地图：变成了美国）。

<html>
  <script src="scripts/jquery-1.8.2.js"></script>
  <script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="scripts/jquery-jvectormap-us-aea-en.js"></script>
<body>
  <div  id="map" style="position: relative;   width: 800px; height: 600px"></div>

 <script>
      //@code_start
      $(function(){
        var palette = ['#66C2A5', '#FC8D62', '#8DA0CB', '#E78AC3', '#A6D854'];
            generateColors = function(){
              var colors = {},
                  key;

              for (key in map.regions) {
                colors[key] = palette[Math.floor(Math.random()*palette.length)];
              }
              return colors;
            },
            map;

        map = new jvm.WorldMap({
          map: 'us_aea_en',
          container: $('#map'),
          series: {
            regions: [{
              attribute: 'fill'
            }]
          }
        });
        map.series.regions[0].setValues(generateColors());
        $('#update-colors-button').click(function(e){
          e.preventDefault();
          map.series.regions[0].setValues(generateColors());
        });
      })
      //@code_end
    </script>   
    </div>
  </body>
</html>

以下错误：

初步检查时产生了：

Error: ReferenceError: map is not defined
Source File: file:///D:/xampp_october_28_2011/htdocs/stackoverflow/scripts/map.html
Line: 30

在使用map变量之前，您没有声明它。此外，您的代码似乎还存在其他需要修复的错误。
同时发布到Dropbox：https://dl.dropboxusercontent.com/u/6465647/mapRandom.html
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接