热点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>