主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: Bing MapsでInfoboxのサイズをコントロール

                
tags: JavaScript
 地図上に並べたいデータがあって、Bing mapsを使ってみた。Google mapsでないのはこの先を見据えてのこと。Googleはいいサービスを展開しているんだけど、そのサービスがどんどん悪化していく印象がある。GoogleAppEngineは無料使用できる範囲がどんどん減っているし、Google mapsは無料だったものが有料化した。だからBingを使ってみる。

 Webページのコンテンツの一つとして地図を埋め込むので、使用するのはJavaScript。参考ページは以下。
http://msdn.microsoft.com/en-us/library/gg427610.aspx
実際に地図をのっけてみたのは以下のページ。
http://helloabsurdworld.appspot.com/article/村上春樹/

 Pushpinで国をポイントして、Pinに作家の数を載せ、Infoboxにその国出身の作家の名前を入れて表示するというふうにやってみた。そうしたところ、InfoBoxが大きくなって重なり合ってしまうため、Infoboxのサイズをコントロールする必要があった。

 コントロールの詳細として、Infoboxにマウスがのれば、Infoboxの全コンテンツが表示できるサイズに拡大。Infoboxのそとへマウスが出れば、Infoboxのタイトルだけが表示されるサイズにまで縮小。イメージは以下のアメリカ合衆国の部分。サイズはwidthを固定で、heightだけを変化させた。heightは、Infoboxのコンテンツから改行タグの数をだし、そこから算出した。
130223_1.jpg

    for (var country in dic)
{
if (!(country in geoDic)){continue;}
var geo = geoDic[country];
if (!geo[0]){continue;}
var loc = new Microsoft.Maps.Location(geo[0], geo[1]);
var pin = new Microsoft.Maps.Pushpin(loc, {text: String(dic[country][1])});
var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
{title: country,
height: TITLE_SIZE,
description:dic[country][0],
visible: true,
offset: new Microsoft.Maps.Point(15,15)});
Microsoft.Maps.Events.addHandler(pinInfobox, 'mouseenter', displayInfobox);
Microsoft.Maps.Events.addHandler(pinInfobox, 'mouseleave', hideInfobox);
map.entities.push(pin);
map.entities.push(pinInfobox);
}


function displayInfobox(e)
{
var regexp = new RegExp('<br>',"gm");
var num = e.target._description.match(regexp).length * FONTSIZE + TITLE_SIZE + BOTTOM_MARGIN;
e.target.setOptions({ height: num, zIndex: 1 });
}


function hideInfobox(e)
{
e.target.setOptions({ height: TITLE_SIZE, zIndex: null });
}
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。