示例描述

该示例展示从全国到区县的地图钻取功能:全国-->浙江-->杭州。

效果演示

示例代码

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src='http://dev.dituhui.com/sdk/1.0.0/js/dituhui-flash.js'></script>
  <script src='http://dev.dituhui.com/sdk/1.0.0/js/sample-data.js'></script>
  <script type="text/javascript" >
   var map = null;
   var titleStyle = {fontSize:25,fontColor:'0'};
   var mapIndex = 0;
   function init()
   {
    map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", "100000", Dituhui.MapType.RANGE, "setData", "onError");
   }  
   function setData()
   {
    var mapStyles = [
     {min:8,max:8,includeMax:true,fillColor:'#ff0000',displayValue:'浙江'},
     {min:0,max:4},
     {min:4,max:8},
     {min:8,max:12},
     {min:12,max:16}];
    var option = 
    {
     data: data, 
     styles:mapStyles, 
     valueField:'gdprate',
     fillColorType:'green',
     mapFillColor:'#FADB61',
     backgroundColor:"#F5F5F5",
     legendTitle:"图  例",
     title:"全  国",
     titleStyle:titleStyle,
     events:[{eventName:"mousemove",isShowTooltip:true},
     {eventName:"click",eventHandler:"onMapClick"}]
    };
    map.setMapOptions(option);
   }

   /*切换至浙江*/
   function onMapClick(event)
   {
    if (event.code == "330000") 
    {
     mapIndex = 1;
     map.unload();
     map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", 
      event.code, Dituhui.MapType.RANGE, "setZJData", "onError");
    };
   }
   function setZJData()
   {
    var hangzhou_data = [
    {name:'杭州市',data:'11.4'},
    {name:'宁波市',data:'9.8'},
    {name:'温州市',data:'12.6'},
    {name:'嘉兴市',data:'11.3'},
    {name:'湖州市',data:'11.3'},
    {name:'绍兴市',data:'9.5'},
    {name:'金华市',data:'13.8'},
    {name:'衢州市',data:'10.1'},
    {name:'舟山市',data:'13.6'},
    {name:'台州市',data:'10.1'}];

    var mapStyles = [
     {min:11.4,max:11.4,includeMax:true,fillColor:'#ff0000',displayValue:'杭州'},
     {min:1,max:4},
     {min:4,max:8},
     {min:8,max:11.4},
     {min:11.4,max:16}];

    var option = 
    {
     data: hangzhou_data, 
     styles:mapStyles, 
     valueField:'data',
     isRLabelVisible:false,
     backgroundColor:"#f5f5f5",
     legendTitle:"图  例",
     isRLabelVisible:true,
     title:"浙  江",
     titleStyle:titleStyle,
     events:[{eventName:"mousemove",isShowTooltip:true},
       {eventName:"click",eventHandler:"onMapClick1"}]
    };
    map.setMapOptions(option);
   }

   /*切换至杭州*/
   function onMapClick1(event)
   {
    if (event.code == "330100") 
    {
     map.unload();
     mapIndex = 2;
     map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", 
      event.code, Dituhui.MapType.RANGE, "setHZData", "onError");
    };
   }

   function setHZData()
   {
    var hangzhou_data = [
    {name:'上城区',data:'11.4'},
    {name:'下城区',data:'9.8'},
    {name:'江干区',data:'12.6'},
    {name:'拱墅区',data:'11.3'},
    {name:'西湖区',data:'11.3'},
    {name:'滨江区',data:'9.5'},
    {name:'萧山区',data:'13.8'},
    {name:'余杭区',data:'10.1'},
    {name:'桐庐县',data:'13.6'},
    {name:'临安',data:'2.3'},
    {name:'淳安',data:'15.2'},
    {name:'建德',data:'5.7'},
    {name:'富阳',data:'13.1'}];

    var mapStyles = [
    {min:1,max:4},
    {min:4,max:8},
    {min:8,max:12},
    {min:12,max:16}];

    var option = 
    {
     data: hangzhou_data, 
     styles:mapStyles, 
     valueField:'data',
     isRLabelVisible:false,
     backgroundColor:"#f5f5f5",
     legendTitle:"图  例",
     isRLabelVisible:true,
     title:"杭  州",
     titleStyle:titleStyle,
     events:[{eventName:"mousemove",isShowTooltip:true}]
    };
    map.setMapOptions(option);
   }

   /*返回至上一级*/
   function recover()
   {
    if(mapIndex == 2)
    {
     map.unload();
     mapIndex = 1;
     map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", 
      "330000", Dituhui.MapType.RANGE, "setZJData", "onError");
    }
    else if(mapIndex == 1)
    {
     map.unload();
     mapIndex = 0;
     map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", 
      "100000", Dituhui.MapType.RANGE, "setData", "onError");
    }
    else if (mapIndex == 0) 
    {
     return;
    };
   }
   function onError(errorcode)
   {
   /*errorcode:错误编码,有关错误编码的详细描述可参考:
   "开发指南"-->"API参考"-->"错误编码"*/
    alert(errorcode);
   }
   window.onload = init;
  </script>
 </head>
 <body>
  <button id='recoverBtn' style='background-color:#31A354' onclick="recover()">  </button>
  <div id='myMap' style='width:100%;height:500px;'>
  </div>
 </body>
</html>