gpt4 book ai didi

javascript - 使用 JVector 随机着色美国 map

转载 作者:数据小太阳 更新时间:2023-10-29 04:37:10 28 4
gpt4 key购买 nike

我在编码美国 map 时遇到问题,该 map 允许使用 JVector API 将颜色随机分配给美国各州 map 。这是代码:

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

这是我的 scripts folder 的链接我保存 .js 文件的地方。function() 有什么问题?

最佳答案

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

使随机美国 map 工作的代码是这样的:

Take from their source with only(取自他们的来源,只有 map :更改为美国)。

<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 变量之前,您还没有它。此外,您的代码似乎隐藏了各种其他需要修复的错误。

同时发布到保管箱:https://dl.dropboxusercontent.com/u/6465647/mapRandom.html

关于javascript - 使用 JVector 随机着色美国 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16290230/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com