PHP と jQuery によるマップ エリア データの統計と表示データの実装例_PHP チュートリアル

HTML

まず、head セクションで raphael.js ライブラリ ファイルと chimamapPath.js パス情報ファイルを読み込みます。この記事では繰り返しません。唯一の違いは、マップ情報プロンプトを表示するために本文に div#tip を追加する必要があることです。箱。

コードをコピーします コードは次のとおりです:

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});// 背景を塗りつぶすcolor var fillcolor = colors [i]; yoffset = 180; ":(e.pageX-yOffset)+"px"}).fadeIn("fast ")
.html("

"+china[state]['name']+"

< ;p>アクティブ ユーザー数: "+prodata+"

");
}, Function () {// ST.ANImate ({Fill: FillColor, Stroke: "#eee"}, 500);


$ ("#tip") ;

R.safari();
}
});
});

上記のコードから、jQuery の hover() を介してマウスが州ブロックにスライドすると、ポップアップ プロンプト ボックスが呼び出され、データがロードされてプロンプト ボックスに表示されることがわかります。また、マウスが州ブロック上でmousemove()を移動する場合でも、プロンプト ボックスを呼び出してマウスと一緒に移動する必要があります。そうしないと、マウスがその中でスライドしてもプロンプト ボックスの位置は変わりません。地域ブロック。エクスペリエンスに影響します。 小さな変更により、ユーザー エクスペリエンスが向上します。
最後に、プロンプト ボックスの効果をカスタマイズする必要がある場合は、プロンプト ボックスの CSS スタイルを設定できます。この例の単純な CSS コードは次のとおりです。

コードをコピーします コードは次のとおりです:

#tip{position:absolute; width:180px; border:1px background:#fff;display:none;半径:5px; -webkit-border-radius:5px; オーバーフロー:非表示;

-moz-box-shadow:1px 2px rgba(0,0,0,.2); -shadow: 1px 1px 2px rgba(0,0,0,.2);
box-shadow:1px 1px 2px rgba(0,0,0,.2);}
#tip h4{height:28px;高さ:28px; 背景:#f0f0f0}
#tip p{line-height:2px 4px}

http://www.bkjia.com/PHPjc/733411.html

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/733411.html技術記事 HTML は最初に raphael.js ライブラリ ファイルと chinamapPath.js パス情報ファイルをヘッド部分に読み込みます。この記事ではそれらを繰り返しません。唯一の違いは、表示するために本文に div#tip を追加する必要があることです。