« Google Maps API を使ってみる（２） | メイン | 和の月 »

2005年7月21日

Google Maps API を使ってみる（３）

今回は、マップのクリックした位置の拡大図表示と
クリックした位置間に線を引く
なんてことをしてみた。

今回は、クロスブラウザの問題が厄介だった。
-----9/2追記--------
私のサイトで、Google Maps API のサンプル付き解説も徐々に作成・公開してます。
--------------------


サンプル

まずはサンプルの使い方を軽く説明しておこうかな。
画面の上にあるラジオボタンでどの機能を使うかを選択します。
「拡大」を選択しマップをクリックすると、クリックした場所の拡大図を表示します。
「道順」を選択しマップを複数箇所クリックすると、順番に線が引かれます。
以上！

では、どうやるかっていうと
GEvent.addListener(map, 'click', function(overlay, point) {...}
で、マップをクリックした時に、
クリックした場所の座標( "point" )やマーカーなど( "overlay" )を取得できるので、
その時に取得したクリックした場所の座標 "point" を使用して、
map.showMapBlowup(point, 0);
とすれば、拡大図が表示されます。
"0" はズームレベルです。
が、バグっているのか、"0"を入力しても、"1"と同じズームになります・・・
さて、firefoxでは動作しましたが、IEではここでエラーが発生しちゃいました。
どうすりゃいいんだ・・・
と、途方に暮れかけたのだけど、どうやら処理が速すぎるからってことのようだ。

というわけで、四の五の言わず、以下のようにすると問題は回避出来る。
window.setTimeout(function() {map.showMapBlowup(point, 0);}, 50);

これは、50ミリ秒後に
map.showMapBlowup(point, 0);
を実行するという意味。
50ミリ秒～100ミリ秒ほど待てばよいようなので、
各自のアプリケーションに合わせて、"50"の部分を変更して下さい。

--------------------------
上記の処理の速さによる問題は現在は修正されて起こらなくなりました。
--------------------------
説明し忘れたのだけど、
if (document.frm.op[0].checked) {...}
は、「拡大」が選択された時に、っていう意味。

「道順」では、
points.push(point);
で、 "point" を配列にして、クリック箇所の座標を覚えておいて、
map.addOverlay(new GPolyline(points));
で、先にクリックした位置と次にクリックした位置の間に線を引きます。
このままだと、どんどん配列に追加され、何度も同じ線を引いてしまい、
クリックすればするほど処理が重くなっていくので、
if (points.length > 1) {
  points.shift();
}
で、２つ前にクリックした箇所の座標を削除しています。

ここでもIEではエラーが起こったのだけど、前回までのサンプルでは
<html xmlns="http://www.w3.org/1999/xhtml">
だったところを、
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
に変更し、さらに、
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
を追加することでエラーが起こらなくなりました。

投稿者 ponpon : 2005年7月21日 17:22 | 【Google】

トラックバック

◇重複トラックバックはこっそり削除しますのでお気になさらないでください。
◇トラックバックスパムと判断しましたらサックリ削除いたしますのでご了承ください。

このエントリーのトラックバックURL:

コメント

コメントしてください




保存しますか?



画像の中に見える文字を入力してください。