Question

我正在尝试设置美国各州的地图，我已经放入了jVectorMap，但无论我做什么都无法改变颜色。

我试图在jsfiddle中实现我的问题，但它不想在那里做任何事情。在我的计算机上生成一张地图，但颜色不会改变。

http://jsfiddle.net/rsRnj/

我正在使用的是：http://jvectormap.com/

任何人都有任何想法，为什么我不能改变州的颜色？

或者，如果有一个更容易使用的地图我也会采取这个建议。我基本上只想在我的页面上使用颜色和悬停效果的可点击地图。

EDIT 现在尝试不同的地图库，将在完成后发布结果

Answer 1

也许重新考虑回到jvectormap？如果我正确理解你的目标，jvectormap应该可以正常工作。

在jvectormap网站上，正在使用1.0版本 http://jvectormap.com/examples/world-gdp/
~~http://jvectormap.com/js/jquery-jvectormap-1.0.min.js~~ https://raw.github.com/bjornd/jvectormap/master/jquery-jvectormap.js（最新版本） http://jvectormap.com/js/jquery-jvectormap-us-aea-en.js
似乎你的小提琴链接到github网页而不是真正的js文件。此外，您无需在小提琴的javascript部分添加标签。 http://doc.jsfiddle.net/basic/introduction.html#javascript
尝试查看某些网站示例的来源，并查看1.0 api的WorldMap部分：http://jvectormap.com/documentation/javascript-api-v1/jvm-worldmap/

工作示例
这是你小提琴的一个分支，似乎符合你对颜色和点击事件的要求：
http://jsfiddle.net/bQ78b/1/

$(function() {
    $('#usMap').vectorMap({
        map: 'us_aea_en',
        hoverColor: false,
        hoverOpacity: 0.5, 
        onRegionClick: function(e, code){
            alert( code.replace("US-", "") );
        }, 
        regionStyle: {
        initial: {
          fill: '#128da7'
        },
        hover: {
            fill: "#A0D1DC"
          }
      }
    });
});

希望这会有所帮助......

Answer 2

改为使用此选项：http://newsignature.github.com/us-map/

如果您要覆盖数据，jVector地图看起来不错，但我只希望每个州都链接到网站上的其他位置。

jVectorMap改变颜色

2 个答案: