php 와 jquery 지도 영역 데이터 통계 전시 데이터 예시 실현

HTML
먼저 헤드 부분 에 raphael.js 라 이브 러 리 파일 과 chinamapPath.js 경로 정보 파일 을 불 러 옵 니 다.본 고 는 중복 되 지 않 고 바디 에 div\#tip 를 추가 하여 지도 정 보 를 보 여 주 는 알림 상 자 를 추가 해 야 합 니 다.

<div id="map"></div> 
<div id="tip"></div> 

jQuery
raphael 을 호출 하여 중국 지 도 를 그리고 통계 데 이 터 를 불 러 옵 니 다.지도 블록 이 작 기 때문에 우 리 는 지 도 를 불 러 오지 않 을 때 데 이 터 를 지도 블록 에 표시 합 니 다.우 리 는 마우스 상호작용 을 통 해 데이터 정 보 를 사용자 에 게 더욱 잘 보 여 줍 니 다.마우스 가 성 블록 으로 미 끄 러 질 때 e.pageX 와 e.pageY 를 통 해 마우스 좌 표를 찾 은 다음 jquery 의 css()방법 으로 알림 상자 div\#tip 를 찾 고 해당 성의 이름과 활성 사용자 수 를 알림 상자 에 추가 하여 보 여 줍 니 다.코드 를 보십시오

$(function(){ 
    $.get("json.php",function(json){ 

    ......//         

    var i=0; 
    for (var state in china) { 
        china[state]['path'].color = Raphael.getColor(0.9); 
        (function (st, state) { 
            var prodata = data[i]; 
            var fillcolor = colors[arr[i]]; 
            st.attr({fill:fillcolor});//      
            xOffset = 70; 
            yOffset = 180; 
            st.hover(function(e){//     
                st.animate({fill: "#fdd", stroke: "#eee"}, 500); 
                R.safari();                 
                $("#tip").css({"top":(e.pageY-xOffset)+"px","left":(e.pageX-yOffset)+"px"}).fadeIn("fast") 
                .html("<h4>"+china[state]['name']+"</h4><p>     ："+prodata+"</p>"); 
            },function(){//     
                st.animate({fill: fillcolor, stroke: "#eee"}, 500); 
                R.safari(); 
                $("#tip").hide(); 
            }); 

            st.mousemove(function(e){//     
                $("#tip").css({"top":(e.pageY-xOffset)+"px","left":(e.pageX-yOffset)+"px"}); 
                R.safari(); 
            }); 

         })(china[state]['path'], state); 
         i++; 
    } 
    }); 
}); 

상기 코드 를 통 해 알 수 있 듯 이 jQuery 의 hover()마 우 스 를 통 해 성 블록 으로 미 끄 러 질 때 팝 업 알림 상 자 를 호출 하고 데 이 터 를 알림 상자 에 불 러 옵 니 다.주목 할 점 은 마우스 가 성 블록 에서 mousemove()를 이동 할 때 도 알림 상 자 를 사용 하여 마우스 와 함께 이동 해 야 한 다 는 것 입 니 다.그렇지 않 으 면 마우스 가 한 성 블록 에서 미 끄 러 지면 알림 상자 의 위치 가 변 하지 않 고 체험 효과 에 영향 을 주 며 작은 변경 은 사용자 체험 을 향상 시 킬 수 있 습 니 다.마지막 으로 알림 상자 의 효 과 를 맞 추 려 면 알림 상자 의 CSS 스타일 을 설정 할 수 있 습 니 다.이 간단 한 CSS 코드 는 다음 과 같 습 니 다.

#tip{position:absolute; width:180px; border:1px solid #d3d3d3; background:#fff;display:none; 
-moz-border-radius:5px; -webkit-border-radius:5px; overflow:hidden; border-radius:5px; 
-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);  
box-shadow:1px 1px 2px rgba(0,0,0,.2);} 
#tip h4{height:28px; line-height:28px; padding-left:6px; background:#f0f0f0} 
#tip p{line-height:24px; padding:2px 4px}