示例描述

该示例展示如何通过HTML代码自定义信息窗内容。其中HTML代码需放在tooltip字段中,详情可查看"示例代码"中的示例数据。

效果演示

示例代码

<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-tooltip.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/", "610000", Dituhui.MapType.RANGE, "setData", "onError");
   }
   function setData()
   {
    var mapStyles = [
     {min:0,max:352},
     {min:352,max:433},
     {min:433,max:600},
     {min:600,max:1000,includeMax:true}];
    var option = 
    {
     /*示例数据*/
     data:[
      {name:'西安',gdp:'1000',tooltip:"<a href='http://www.dituhui.com' target='_blank'><b><font size='20' color='#238B45'>羊肉泡馍</font></b></a><br><img src='/images/xian.jpg' width='150'/>"},
      {name:'铜川',gdp:'300',tooltip:"<a href='http://www.dituhui.com' target='_blank'><b><font size='20' color='#238B45'>搅团</font></b></a><br><br>搅团为西北一特色吃食,定<br>义为“用面搅成的浆糊”,陕<br>甘宁尤好吃。<br><img src='/images/tongchuan.jpg' width='150'/>"},
      {name:'宝鸡',gdp:'600',tooltip:"<a href='http://www.dituhui.com' target='_blank'><b><font size='20' color='#238B45'>岐山臊子面</font></b></a><br><br>臊(sào,不读shào)子面是陕<br>西关中平原及甘肃陇东的一种<br>传统特色面,为西府名小吃。臊<br>子面历史悠久,尤以<a href='http://www.dituhui.com/regions/%E5%AE%9D%E9%B8%A1'>宝鸡市</a>岐<br>山县的岐山臊子面最为正宗。<br><img src='/images/baoji.jpg' width='150'/>"},
      {name:'咸阳',gdp:'400',tooltip:"<a href='http://www.dituhui.com' target='_blank'><b><font size='20' color='#238B45'>biangbiang面</font></b></a><br><img src='/images/xianyang.jpg' width='150' height='100'/>"},
      {name:'渭南',gdp:'256',tooltip:"<b><font size='20' color='#238B45'>荞面饸饹</font></b><br><img src='/images/weinan.jpg' width='150'/>"},
      {name:'延安',gdp:'654',tooltip:"<b><font size='20' color='#238B45'>洋芋擦擦</font></b><br><img src='/images/yanan.jpg' width='150'/>"},
      {name:'汉中',gdp:'345',tooltip:"<a href='http://www.dituhui.com' target='_blank'><b><font size='20' color='#238B45'>汉中面皮</font></b></a><br><img src='/images/hanzhong.jpg' width='150'/>"},
      {name:'榆林',gdp:'743',tooltip:"<b><font size='20' color='#238B45'>黄馍馍</font></b><br><img src='/images/yulin.jpg' width='150' height='130'/>"},
      {name:'安康',gdp:'536',tooltip:"<a href='http://www.dituhui.com' target='_blank'><b><font size='20' color='#238B45'>蒸面</font></b></a><br><img src='/images/ankang.jpg' width='150'/>"},
      {name:'商洛',gdp:'433',tooltip:"<a href='http://www.dituhui.com' target='_blank'><b><font size='20' color='#238B45'>黑面皮</font></b></a><br><img src='/images/shangluo.jpg' width='150'/>"}],
     styles:mapStyles, 
     legendPosition:"left_bottom",
     valueField:'gdp',
     isRLabelVisible:true,
     backgroundColor:"#F5F5F5",
     legendTitle:"GDP增速%",
     /*通过监听鼠标事件,设置信息浮窗是否可见*/
     events:[{eventName:"mousemove",isShowTooltip:true}]
    };
    map.setMapOptions(option);
   }
   function onError(errorcode)
   {
    /*errorcode:错误编码,有关错误编码的详细描述可参考:
    "开发指南"-->"API参考"-->"错误编码"*/
    alert(errorcode);          
   }
   window.onload = init;
  </script>
 </head>
 <body>
  <div id='myMap' style='width:680px;height:500px'>
  </div>
 </body>
</html>