示例描述

该示例以click、mousemove两种事件为例,展示事件的使用方法。地图慧SDK支持的事件类型包括:mousemove、mouseover、mouseout、click(鼠标单击)、dbclick(鼠标双击),事件返回结果中包括:行政区名称 event.name、行政区代码 event.code,与行政区相关的属性数据 event.data。

效果演示

您选择的地区为:

示例代码

<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:0,max:3},
     {min:3,max:6},
     {min:6,max:9},
     {min:9,max:12},
     {min:12,max:15}];
    var option =
    {
     data: data,
     styles:mapStyles,
     valueField:'gdprate',
     legendPosition:"left_bottom",
     //监听事件,可在事件中指定是否显示信息窗isShowTooltip
     events:[{eventName:"mousemove",eventHandler:"onMapMove"},
              {eventName:"click",eventHandler:"onMapClick"}],
     isPanEnable:false,
     backgroundColor:"#F5F5F5",
     legendTitle:"GDP增速%"
    };
    map.setMapOptions(option);
   }
   //鼠标移动时触发回调函数
   function onMapMove(event)
   {
    if(event.name){
     document.getElementById("change").innerHTML = event.name + "," + event.data.gdprate;
    }
    else{
     document.getElementById("change").innerHTML = "";
    }
   }
   //鼠标单击时的监听函数
   function onMapClick(event)
   {
    if(event.name){
     alert(event.name + " : " + event.data.gdprate);
    }
    else{
     alert('无数据');
    }
   }

   function onError(errorcode)
   {
    /*errorcode:错误编码,有关错误编码的详细描述可参考:
    "开发指南"-->"API参考"-->"错误编码"*/
    alert(errorcode);
   }
   window.onload = init;
  </script>
 </head>
 <body>
  <div style="font-size:18px">
   <strong>您选择的地区为:</strong><span id="change" style="color:#ff0000"></span>
  </div>
  <div id='myMap' style='width:660px;height:600px'>
  </div>
 </body>
</html>