Javascript 使用JVector随机着色美国地图_Javascript_Map_Jvectormap

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

javascript map

Javascript 使用JVector随机着色美国地图,javascript,map,jvectormap,Javascript,Map,Jvectormap,我对编码美国地图有问题，这将允许使用jvectorapi随机分配美国各州地图的颜色。代码如下： <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

我对编码美国地图有问题，这将允许使用jvectorapi随机分配美国各州地图的颜色。代码如下：

<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>


/*它甚至不加载地图。它应该做的是生成随机颜色
*在按下“更新”按钮时显示地图
*/
$（函数（）{
变量调色板=['#66C2A5'、'#FC8D62'、'#8DA0CB'、'#E78AC3'、'#A6D854']；
generateColors=函数（）{
var colors={}，
钥匙
用于（输入地图区域）{
颜色[key]=调色板[Math.floor（Math.random（）*palete.length）]；
}
返回颜色；
},
地图；
map=new jvm.USMap({
地图：“美国-欧洲-欧洲”，
容器：$（“#映射”），
系列：{
区域：[{
属性：“填充”
}]
}
});
map.series.regions[0].setValue（generateColors（））；
$（“#更新颜色按钮”）。单击（函数（e）{
e、 预防默认值（）；
map.series.regions[0].setValue（generateColors（））；
});
})

这里是我保存

.js

文件的链接。

函数（）有什么问题？
您的问题与直接从中复制的代码有关
使随机美国地图工作的代码如下：
仅从其来源处获取（仅从其来源处获取地图：更改为美国）
在尝试使用map变量之前，您尚未使用该变量。
此外，您的代码似乎隐藏了各种其他需要修复的错误
也发布到dropbox:
您是否尝试过在没有“randon Color”功能的情况下加载地图？@Kamil是的，我已经在上面的代码中注释掉了该块。您可以复制粘贴整个代码并下载`scripts文件夹，然后尝试运行它。您将看到，如果您取消注释代码，只需加载map并注释掉“random color”函数，它就可以正常工作。地图加载正常。你能帮我做一下“随机颜色”功能吗？为什么你有“、map；”在generateColors（）的末尾，您的问题使用以下代码：。不幸的是，他们的示例缺少一些内容，因此您需要直接从pagesource复制/粘贴。我用正确的代码更新了我的答案以反映这一点。@Ringo他有'map'，因为它是一个声明函数和空变量的变量声明。它就像c/java，在这里你做对象a，b，c，d，e，除了在这个例子中，它是在函数定义之后添加的，这是我第一次看到它。
<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