今回は、マップのクリックした位置の拡大図表示と
クリックした位置間に線を引く
なんてことをしてみた。
今回は、クロスブラウザの問題が厄介だった。
—–9/2追記——–
私のサイトで、Google Maps API のサンプル付き解説も徐々に作成・公開してます。
——————–
まずはサンプルの使い方を軽く説明しておこうかな。
画面の上にあるラジオボタンでどの機能を使うかを選択します。
「拡大」を選択しマップをクリックすると、クリックした場所の拡大図を表示します。
「道順」を選択しマップを複数箇所クリックすると、順番に線が引かれます。
以上！
では、どうやるかっていうと
で、マップをクリックした時に、
クリックした場所の座標( “point” )やマーカーなど( “overlay” )を取得できるので、
その時に取得したクリックした場所の座標 “point” を使用して、
とすれば、拡大図が表示されます。
“0″ はズームレベルです。
が、バグっているのか、”0″を入力しても、”1″と同じズームになります・・・
さて、firefoxでは動作しましたが、IEではここでエラーが発生しちゃいました。
どうすりゃいいんだ・・・
と、途方に暮れかけたのだけど、どうやら処理が速すぎるからってことのようだ。
というわけで、四の五の言わず、以下のようにすると問題は回避出来る。
これは、50ミリ秒後に
を実行するという意味。
50ミリ秒～100ミリ秒ほど待てばよいようなので、
各自のアプリケーションに合わせて、”50“の部分を変更して下さい。
————————–
上記の処理の速さによる問題は現在は修正されて起こらなくなりました。
————————–
説明し忘れたのだけど、
は、「拡大」が選択された時に、っていう意味。
「道順」では、
で、 “point” を配列にして、クリック箇所の座標を覚えておいて、
で、先にクリックした位置と次にクリックした位置の間に線を引きます。
このままだと、どんどん配列に追加され、何度も同じ線を引いてしまい、
クリックすればするほど処理が重くなっていくので、
points.shift();
}
で、２つ前にクリックした箇所の座標を削除しています。
ここでもIEではエラーが起こったのだけど、前回までのサンプルでは
だったところを、
に変更し、さらに、
v\:* {
behavior:url(#default#VML);
}
</style>
を追加することでエラーが起こらなくなりました。