热点map及jquery的ajax中json对象处理

热点地图及jquery的ajax中json对象处理

 

         <img src="../../images/map-bg.jpg" width="370" height="526" border="0px" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="199,91,241,114" href="javascript:void(0)" alt="承德" title="right"/>
<area shape="rect" alt="张家口" coords="66,131,117,149" href="javascript:void(0)" title="left" />
<area shape="rect" coords="309,173,357,193" href="javascript:void(0)" alt="秦皇岛" title="right"/>
<area shape="rect" coords="259,205,294,226" href="javascript:void(0)" alt="唐山" title="right"/>
<area shape="rect" coords="163,259,200,280" href="javascript:void(0)" alt="廊坊" title="right"/>
  <area shape="rect" coords="87,279,127,303" href="javascript:void(0)" alt="保定" title="left"/>
    <area shape="rect" coords="182,331,220,355" href="javascript:void(0)" alt="沧州" title="right"/>
      <area shape="rect" coords="44,359,94,380" href="javascript:void(0)" alt="石家庄" title="left"/>
	  <area shape="rect" coords="127,371,164,392" href="javascript:void(0)" alt="衡水" title="right"/>
        <area shape="rect" coords="72,418,108,438" href="javascript:void(0)" alt="邢台" title="left"/>
          <area shape="rect" coords="59,476,97,495" href="javascript:void(0)" alt="邯郸" title="left"/>
</map>

 

<script type="text/javascript">  
$(document).ready(function(){
  $("area").each(function(){
	  $(this).mouseover(function(){
		  getMapData($(this).attr("title"),$(this).attr("alt"));
               // alert($(this).attr("alt"));
		  }).mouseout(function(){
			   $("div[id^='d_']").hide();
			  });
	  });
});

//取得相应市的相关数据
function getMapData(title,regionname){
	
	$.ajax({
           type:'post',
           url:'showMapDataAction.do',
           data:'method=queryMapData&cityId=1',
           dataType: 'json',            
           cache:false,
           success:function(data){
               //区域
               $("#regionname").text(regionname);
               //给各字段赋值
               $("#ctscry").text(data.ctscry);
               $("#ctss").text(data.ctss);
               $("#ctxsdqbzry").text(data.ctxsdqbzry);
               $("#ctczcstyry").text(data.ctczcstyry);
               $("#ctqtry").text(data.ctqtry);
               $("#ctxsmzrs").text(data.ctxsmzrs);
               $("#ctzybxrc").text(data.ctzybxrc);
               $("#ctdbjzrc").text(data.ctdbjzrc);
               $("#ctywb").text(data.ctywb);
               $("#ctyfyy").text(data.ctyfyy);
               $("#ctjzgyrc").text(data.ctjzgyrc);
               $("#ctdqlyrc").text(data.ctdqlyrc);
               $("#ctgry").text(data.ctgry);
               $("#ctgry_jzgyrc").text(data.ctgry_jzgyrc);
               $("#ctgry_dqlyrc").text(data.ctgry_dqlyrc);
               $("#ctls").text(data.ctls);
               $("#ctlsjnss").text(data.ctlsjnss);
               
               //判断在左边还是在右边显示相关数据
        	   var dom=$("#d_left").html();
               if(title=='left'){
               $("#d_left").show();
               }
               if(title=='right'){
               $("#d_right").html(dom);
               $("#d_right").show();
               }
               }
		});
}
</script>