PHP+Mysql+jQuery実現地図領域データ統計−展示データ

地図上の限られたブロック内でより多くの情報を示すには、地図のインタラクションによって実現することがより良い方法です.ここでは、マウスで地図にスライドして省領域を指定し、ポップアップのプロンプトボックスに対応する省のデータ情報を表示する方法について説明します.データ統計や地図ブロック表示などのシーンに適しています.
PHP+Mysql+jQuery実装地図領域データ統計-ロードデータ、原文の例に基づいて新しいヒントボックスを追加してデータ機能を表示します.地図の描画とデータのロードについてよく知らない場合は、まずこのサイトの前の文章の紹介を読むことをお勧めします.
HTML
まずhead部分にraphaelをロードする.jsライブラリファイルとchinamappPath.jsパス情報ファイルは、本稿では繰り返し書かないが、bodyにdiv#tipを追加して地図情報を表示するプロンプトボックスが唯一異なる.

<divid="map"></div>
<divid="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()を移動するときも、プロンプト・ボックスを呼び出してマウスと一緒に移動するという効果が必要です.そうでなければ、マウスが1つの省ブロック内をスライドすると、プロンプトボックスの位置が変化せず、体験効果に影響し、小さな変更でユーザー体験を向上させることができます.
最後に、プロンプトボックスの効果をカスタマイズする必要がある場合は、プロンプトボックスのCSSスタイルを設定できます.この例の簡単なCSSコードは以下の通りです.

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