これは本当に私を悩ませます-たくさん。
Google マップ v3 で生成されたクライアント側のコードを firebug で調べた後、通りをドライブして、これらのエンジニアの何人かに私の心の一部を与える準備が整いました... arrrgh :P
infowWindow クラスは、個人的には単純におかしいと思う HTML を生成します。誰かが私がそれを理解するのを手伝ってくれるかもしれません。
infowWindow の HTML 構造は次のようになります。
#map_canvas > div > div > div > div > div // 5 levels of elements,
no big deal here, ok...
> div // top left corner
div // top right corner
div // bottom left corner
div // bottom right corner
// now comes fun stuff for the speech bubble arrow:
div
div
div
div
div
div
div
div
div
div
// the 10 divs above are stacked diagonally with odd sizes to make this arrow.
i'm sorry but WHY?!? is it done like that? I suppose they wanted the user to be
able to grab the map even right next to the arrow. Think about this: do users
really need to be able to not grab the arrow? if grabbing the arrow causes map pan,
as is the case for the shadow images, would that really be a problem?
div // bottom middle for image background border or something
div // top middle
div // middle
div // bottom middle, again
div // entire block of the infoWindow, probably the container
> img // close box
div // center block with the contents of the infoWindow
div // text content container
うわー-それはナッツです！
本当のセマンティック構造がないことに注意してください。そして-まあ、あえてそのような仮定を持っています-どこにもクラス名はなく、何もありません。おそらく、彼らはある種の 9 スライス ボックスを実行していて、それから矢印を個別に作成しているのだろうと考えました。つまり、iw3.png のイメージ スプライトは、ここでは問題になりません。
このAPIに影響を与える誰かがこれに遭遇することを心から願っています.Googleが最終的にこれを解決する方法を見つけて、カスタムのinfoWindowビジュアルがマーカーと同じくらい簡単になることを願っています.
チューニングしていただきありがとうございます。嬉しいコメント。
その間、ハックを使用してこれらのクレイジーな div にアクセスし、入札を実行させます。
以前に他の投稿にコメントしましたが、現在必要とされているように、ウィンドウ オブジェクト全体をほぼ複製することなくカスタム UI を使用できるようにする API のメソッドを要求するのは、多すぎるべきではないと思います (Google を参照)。拡張クラス v3)。
google.maps.infoWindow.setStyle({
'topleft' : {
'background' : 'url(images/windowsprite.png) 0 0 no-repeat',
'width' : '10px',
'height' : '10px'
},
'topRight' : {
...etc...
}
...etc...
})