快速入门

本节介绍如何在线快速使用地图慧SDK,创建地图应用。使用离线版,请联系我们

1)准备HTML页面,引用SDK中javascript库文件,代码如下;
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--引用dituhui_flash.js-->
        <script src='http://dev.dituhui.com/sdk/1.0.0/js/dituhui-flash.js'></script>
    </head>
    <body>
        <!--指定放置地图的容器,设定宽、高 -->
        <div id='myMap' style='width:680px;height:550px'>
        </div>
    </body>
</html>
2)编写JS代码初始化map
/*1、声明map变量*/
var map = null;
/*2、初始化地图,参数说明:
params1: 放置map的div的id
params2: 放置swf文件夹的路径
params3: 指定地图的行政区划代码
params4: 指定地图的模板(RANGE、BUBBLE...,枚举对应的值为:"Range"、"Bubble")
params5: 地图初始化成功的回调函数名称,必须在回调函数中设置地图参数和数据
params6: 错误回调函数,地图中的异常或错误都会回调这个函数
params7: 语言版本,目前支持"zh_cn"与"en_us"两种*/
function init(){
    map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", "100000", Dituhui.MapType.RANGE, "setData", "onError", "zh_cn");
}

/*页面加载完后初始化地图*/
window.onload = init;
3)在回调函数中对map进行设置
/*1、在回调函数setData中配置地图*/
function setData(){
    /*地图分段样式设置:将需要制图的数据分成4组,给每一个组分别设置数值区间和显示样式,参数说明:
    min:该组的最小值
    max:改组的最大值*/
    var mapStyles = [
        {min:1,max:4,displayValue:'4%以下'},
        {min:4,max:8,displayValue:'4%~8%'},
        {min:8,max:12,displayValue:'8%~12%'},
        {min:12,max:16,displayValue:'12%以上'}];
    var titleStyle = {fontSize:25,fontColor:'#000000'};
    var subTitleStyle = {fontSize:15,fontColor:'#000000'};
    /*用户数据设置:只能接收以json对象的方式存储的数据,地区列名称为"name",
    可以指定标注文本的字段,例如"pyname"*/
    var data = [
        {name:'浙江',gdprate:'8.0'},
        {name:'广东',gdprate:'8.2'},
        {name:'江苏',gdprate:'10.1'},
        {name:'上海',gdprate:'7.5'},
        {name:'北京',gdprate:'7.7'},
        {name:'福建',gdprate:'11.4'},
        {name:'山东',gdprate:'9.8'},
        {name:'四川',gdprate:'12.6'},
        {name:'湖北',gdprate:'11.3'},
        {name:'湖南',gdprate:'11.3'},
        {name:'辽宁',gdprate:'9.5'},
        {name:'天津',gdprate:'13.8'},
        {name:'河南',gdprate:'10.1'},
        {name:'重庆',gdprate:'13.6'},
        {name:'山西',gdprate:'10.1'},
        {name:'云南',gdprate:'13.0'},
        {name:'安徽',gdprate:'12.1'},
        {name:'陕西',gdprate:'12.9'},
        {name:'广西',gdprate:'11.3'},
        {name:'江西',gdprate:'11.0'},
        {name:'贵州',gdprate:'13.6'},
        {name:'内蒙古',gdprate:'11.7'},
        {name:'河北',gdprate:'9.6'},
        {name:'黑龙江',gdprate:'10.0'},
        {name:'甘肃',gdprate:'12.6'},
        {name:'吉林',gdprate:'12.0'},
        {name:'海南',gdprate:'9.1'},
        {name:'宁夏',gdprate:'11.5'},
        {name:'青海',gdprate:'12.3'},
        {name:'西藏',gdprate:'11.8'},
        {name:'新疆',gdprate:'12.0'},
        {name:'香港',gdprate:'4.8'},
        {name:'澳门',gdprate:'9.9'},
        {name:'台湾',gdprate:'1.25'}];

    /*地图参数设置:
    data:指定的数据数组,
    styles:设置style的数组,
    valueField:指定制作地图的字段
    title:标题
    titleStyle:标题样式
    subtitle:子标题
    subTitleStyle:子标题样式
    isRLabelVisible: 是否显示行政区名称,例如省名
    legendPosition:图例位置:"left_top","left_bottom",
    "right_top","right_bottom",默认为left_top*/
    var option = {
        data: data,
        styles:mapStyles,
        valueField:'gdprate',
        title:"2012年中国各省GDP增速",
        titleStyle:titleStyle,
        subtitle:"单位(%)",
        subTitleStyle:subTitleStyle,
        isRLabelVisible:true,
        legendPosition:"left_bottom",
        legendTitle:"GDP增速(%)",
        backgroundColor:"#F2F1F0"};
    /*通过option对象统一进行赋值*/
    map.setMapOptions(option);
}

/*2、在异常回调函数中捕获错误信息*/
function onError(errorcode)
{
 /*errorcode:错误编码,有关错误编码的详细描述可参考:
 "开发指南"-->"API参考"-->"错误编码"*/
 alert(errorcode);
}
4)将2)中创建的HTML页面通过web服务器发布出来,即可看到您的统计地图效果。