我在使用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>
以下是指向scripts folder的{{3}}链接,其中包含.js
个文件。
function()
有什么问题?
答案 0 :(得分: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