3

当社のWebサイトは、クエリから施設を選択し、結果を10の場所のバッチでユーザーに返します。グリッドビューに詳細を表示し、場所をユーザーの画鋲としてBingMapに表示します。マップ内のアイテムにカーソルを合わせると、情報パネルなどがポップアップ表示されます。これをより使いやすくするための私の要件は次のとおりです。

1)ユーザーがグリッドビューリストのアイテムにカーソルを合わせると、マップ上の対応するピンが強調表示されます。2)ユーザーがリスト内のアイテムをクリックすると、マップはその場所にズームします。(中心と縮尺が異なる地図を再描画することで、比較的簡単だと思います)

最初のものについての私の考えは、JavaScriptを使用して、関連付けられた画鋲の要素を取得し、それを「強調表示」状態の新しい画像に置き換え、後で元の画像に置き換えることです。

だから私の質問は:-これは正しいアプローチですか、それともより良いアプローチがありますか、そしてそこに利用可能な同様のことを行うサンプルコードはありますか?

ポールに感謝します

4

1 に答える 1

3

それはまさに私が使用するアプローチです;)私が提案する唯一のわずかな変更は、画像を完全に新しいものに置き換える代わりに、ハイライトされた画像とハイライトされていない画像の両方を含むスプライトシートを使用することです。次に、onmouseoverイベントハンドラーで、プッシュピンのtypeNameプロパティを設定して、画像をオフセットするCSSクラスを割り当て、強調表示された状態のみを表示します。onmouseoutイベントでは、CSSクラスを再度リセットして、強調表示されていない背景画像を表示します。そうすれば、ページの読み込みが速くなり、古い画像が新しい画像に置き換えられるときにちらつきのリスクを冒す必要がなくなります。

typeNameプロパティのリファレンス:http://msdn.microsoft.com/en-us/library/gg427629.aspx

于 2011-09-28T13:20:28.697 に答える