jvectormap制作多级地图(如：世界地图中包含中国带省的地图)

点击中国地图显示中国详细地图  并带标注 区域样式

var markers;

  var values1;
  var values2;
  var values3;    
   $(function(){
          var  map,
          markerIndex = 0,

          markersCoords = {};

//标注

     markers=[
       [61.18, -149.53],
       [21.18, -157.49],
      {latLng: [41.90, 12.45], name: 'Vatican City'},
      {latLng: [40,116], name: 'beijing'},
      {latLng: [139,35], name: 'zhengzhou'}
       ];
          values1 = [408, 512, 550, 781];
          values2 = [1, 2, 3, 4];

          values3 = { '4': 'bank', '5': 'factory'};

//含多级地图用MultiMap 如果只有一级用map

    map=new jvm.MultiMap({

//将地图放到对应的div中

    container: $('#map1'),

//最大级数(地图层数0为一层，1为二层)

    maxLevel: 1,

//主地图

    main: {
      map: 'world_mill_en',
       panOnDrag: true,
        focusOn: {
          x: 0.5,
          y: 0.5,
          scale: 1,
          animate: true
        },
        
        backgroundColor:"#679EE3",
        markerStyle: {
                      initial: {
                                 fill: '#DCDC10',
                                 stroke: '#383f47'
                               }
                     },
        markers:markers,

        regionsSelectable: true,
        regionStyle:{
                     initial: {
                             fill: '#F5E3A2',
                             "fill-opacity": 1
                             },
                     hover: {
                             "fill-opacity": 0.8,
                              cursor: 'pointer'
                             },
                    selected: {
                             fill: 'blue'
                             },
                 selectedHover: {
                        }
               },
        regionLabelStyle:{
                          initial: {
                                    'font-family': 'Verdana',
                                    'font-size': '12',
                                    'font-weight': 'bold',
                                    cursor: 'default',
                                    fill: 'white'
                                    },
                        hover: {
                                cursor: 'pointer'
                                }
                        },
        
        series: {
         markers: [{
       //     attribute: 'fill',
       //     scale: ['#C8EEFF', '#0071A4'],
      //      normalizeFunction: 'polynomial',
     //       values: values1,
     //       legend: {
     //         vertical: true
     //       }
          }],
          regions: [{
            scale: ['#7CC57C', '#white'],
            normalizeFunction: 'polynomial'
          }]
        },
        markersSelectable:true,
        onMarkerTipShow: function(e, tip, code){
            map.maps.world_mill_en.tip.text(markersCoords[code].lat.toFixed(2)+' '+markersCoords[code].lng.toFixed(2));
          },
        onMarkerClick: function(e, code){
            map.maps.world_mill_en.removeMarkers([code]);
            map.maps.world_mill_en.tip.hide();
          }

    },
    //根据url找到相关地图
    
    mapUrlByCode: function(code, multiMap){
    
    if(code == 'US' || code == 'CN'){
    //  multiMap.map.addMarkers(markers);
      multiMap.backgroundColor="blue";
      return 'assets/jquery-jvectormap-'+code.toLowerCase()+ '-' + multiMap.defaultProjection + '-en.js';
     
    }else{
    $('#map1').click(function(e){
          var  a=map;
        //  alert(JSON.stringify(a.params));
          var x = e.pageX - multiMap.params.container.offset().left,
              y = e.pageY - multiMap.params.container.offset().top,
              latLng = multiMap.maps.world_mill_en.pointToLatLng(x, y),
              targetCls = $(e.target).attr('class');

          if (latLng && (!targetCls || targetCls.indexOf('jvectormap-marker') === -1)) {
            markersCoords[markerIndex] = latLng;
            multiMap.maps.world_mill_en.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
            markerIndex += 1;
          }
      });
      $('#map1').bind('');
      return false;
    }
    }
/*  
    //根据name找到相关地图
    mapNameByCode:function(code,multimap){
    // return   code.toLowerCase()+'_'+ multiMap.defaultProjection+'_en';
    return  'cn_mill_en';
    }
*/
  });
    //    map.addMarkers(markers,[values1,values2,values3]);

    });

2.如果需要设置2级地图样式、标注等需要修改multimap.js文件对应代码修改为：

      that.addMap(name, {map: name,backgroundColor:"#679EE3",markerStyle: {
                      initial: {
                                 fill: '#DCDC10',
                                 stroke: '#383f47'
                                  }
                                    },
                      markers:markers,
                      regionStyle:{
                     initial: {
                             fill: '#F5E3A2',
                             "fill-opacity": 1
                             },
                     hover: {
                             "fill-opacity": 0.8,
                              cursor: 'pointer'
                             },
                    selected: {
                             fill: 'blue'
                             },
                 selectedHover: {
                        }
               },multiMapLevel: currentMap.params.multiMapLevel + 1});