jQuery的jVectorMap矢量地图用法（部分功能实现）

需要引入的js文件：

    <script type="text/javascript" src="javascripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="jquerylib/jquery-jvectormap.js"></script>
    <script type="text/javascript" src="jquerylib/jquery-mousewheel.js"></script>
    <script type="text/javascript" src="jquerylib/jvectormap.js"></script>
    <script type="text/javascript" src="jquerylib/abstract-element.js"></script>
    <script type="text/javascript" src="jquerylib/abstract-canvas-element.js"></script>
    <script type="text/javascript" src="jquerylib/abstract-shape-element.js"></script>
    <script type="text/javascript" src="jquerylib/svg-element.js"></script>
    <script type="text/javascript" src="jquerylib/svg-group-element.js"></script>
    <script type="text/javascript" src="jquerylib/svg-canvas-element.js"></script>
    <script type="text/javascript" src="jquerylib/svg-shape-element.js"></script>
    <script type="text/javascript" src="jquerylib/svg-path-element.js"></script>
    <script type="text/javascript" src="jquerylib/svg-circle-element.js"></script>
    <script type="text/javascript" src="jquerylib/vml-element.js"></script>
    <script type="text/javascript" src="jquerylib/vml-group-element.js"></script>
    <script type="text/javascript" src="jquerylib/vml-canvas-element.js"></script>
    <script type="text/javascript" src="jquerylib/vml-shape-element.js"></script>
    <script type="text/javascript" src="jquerylib/vml-path-element.js"></script>
    <script type="text/javascript" src="jquerylib/vml-circle-element.js"></script>
    <script type="text/javascript" src="jquerylib/vector-canvas.js"></script>
    <script type="text/javascript" src="jquerylib/simple-scale.js"></script>
    <script type="text/javascript" src="jquerylib/numeric-scale.js"></script>
    <script type="text/javascript" src="jquerylib/ordinal-scale.js"></script>
    <script type="text/javascript" src="jquerylib/color-scale.js"></script>
    <script type="text/javascript" src="jquerylib/data-series.js"></script>
    <script type="text/javascript" src="jquerylib/proj.js"></script>
    <script type="text/javascript" src="jquerylib/world-map.js"></script>
    <script type="text/javascript" src="jquerylib/jquery-jvectormap-world-mill-en.js"></script>

加载地图

var map;
var regionhits={};
var regionhits_countr={};
var inser_mage={};
var massage=null;
 $(function(){
   map = new jvm.WorldMap({
        container: $('#map1'),
        map: 'world_mill_en',
        backgroundColor:'',
       //鼠标指向国家事件
        onRegionLabelShow: function(event, label, code) {
        var temp=0;
        if(regionhits[code]==null){
       		 regionhits[code]==1;
        }else{
      	 	temp=regionhits[code];
        }
        label.html(
        "<big>" + label.html() + "</big>"+"<hr style='margin-top:3px;'>"+
        "<p style='margin-top:5px;'>攻击次数："+temp+"次</p>"
      	  );
  	 	},
         //鼠标指向标注点事件
        onMarkerLabelShow: function(event, label, code){
        label.html(
        	  "<p>国家城市："+ label.html()+"</p> <hr style='margin-top:3px '/>"+
	          "<p style='margin-top:4px'>经纬度："+inser_mage[code]+"</p><hr style='margin-top:3px '/>"+
	          "<p style='margin-top:4px'>攻击次数："+regionhits_countr[code]+"次</p>"
	        );
	      },
        series: {
            regions: [{
                values: regionhits,
                scale: ['#C8EEFF', '#0071A4'],
                attribute: 'fill',
                normalizeFunction: 'polynomial'
            }]
        }
        
    });
});


<div id="map1"></div>

添加区域颜色事件 （改变区域的颜色事件，regionhits是一个json对象，把包装的json字符串转换成json对象即可。格式为{"CN":111}）

map.series.regions[0].setValues(regionhits);

标注点（endmasg为id唯一标识。lan为{latLng:[endmasg],name:endip,style:markerdst_color}json对象，里面有经纬度、名字、样式等）

map.addMarker(endmasg,lan,2,2);