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

来源：互联网发布：手机网页源码编辑：程序博客网时间：2024/05/19 02:45

需要引入的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);