示例描述

点击"green"、"red"、"blue"按钮动态切换地图颜色。

效果演示

示例代码

<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;
    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:1,max:4},
      {min:4,max:8},
      {min:8,max:12},
      {min:12,max:16}];
     var option = 
     {
      data: data, 
      styles:mapStyles, 
      valueField:'gdprate',
      backgroundColor:"#F5F5F5",
      legendTitle:"GDP增速%"
     };
     map.setMapOptions(option);
    }
    function onError(errorcode)
    {
     alert(errorcode);          
    }
    window.onload = init;
    function changeColor(colorType){
      switch(colorType){
        case "red":
          map.setFillColorType("red");
          break;
        case "green":
          map.setFillColorType("green");
          break;
        case "blue":
          map.setFillColorType("blue");
          break;
        default:
          break;
      }
    }
  </script>
  </head>
  <body>
    <button style='background-color:#31A354' onclick="changeColor('green')">green</button>
    <button style='background-color:#DE2D26' onclick="changeColor('red')">red</button>
    <button style='background-color:#3182BD' onclick="changeColor('blue')">blue</button>
    <div id='myMap' style='width:660px;height:600px'>
    </div>
  </body>
</html>