2012-09-16 163 views
4

我想设置一个美国国家的地图,我放弃了一个jVectorMap,但不能让颜色改变,无论我做什么。jVectorMap改变颜色

我试图在jsfiddle中实现我的问题,但它不想在那里做任何事情。在我的电脑上生成地图,但颜色不会改变。

http://jsfiddle.net/rsRnj/

我使用的pluging:http://jvectormap.com/

任何人有任何想法,为什么我不能改变状态的颜色吗?或者,如果有更容易使用的地图,我也会采纳这一建议。我基本上只想在页面上使用颜色和悬停效果来点击地图。

编辑 现在尝试不同的图库,将发布结果完成后

+0

jvectormap应该工作;回答如下。 – mg1075

回答

0

结束了这个选项,而不是去:http://newsignature.github.com/us-map/

的jVector地图看起来不错,如果你有数据叠加,但我只是希望每个州都可以链接到网站上的其他地方。

13

也许重新考虑回去与jvectormap?如果我正确理解你的目标,jvectormap应该可以正常工作。

  1. 在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

  2. 看来你拨弄链接到GitHub的网页,而不是一个真正的js文件。另外,不需要在小提琴的JavaScript部分添加标签。 http://doc.jsfiddle.net/basic/introduction.html#javascript

  3. 尝试查看一些网站的例子源,并且还研究了1.0 API的世界地图部分: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" 
      } 
     } 
    }); 
}); 

希望这有助于...

+0

+1为regionStyle:代码! –