4

KML と GGeoXml オブジェクトを使用して、埋め込まれた Google マップに図形を重ねます。KML ファイルの目印には、バルーンに表示されるカスタムの説明情報があります。

<Placemark>
    <name />
    <description>
        <![CDATA[
            <div class="MapPopup">
                <h6>Concession</h6>
                <h4>~Name~</h4>
                <p>Description goes here</p>
                <a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
            </div>
        ]]>
    </description>
    <styleUrl>#masterPolyStyle</styleUrl>
    ...Placemarks go here ...
</Placemark>

これまでのところ、ポップアップが表示され、正しいテキストが含まれています。ここに奇妙なことがあります: CSS を使用して、ポップアップに表示される内容をフォーマットしようとしていますが、途中で機能します。

具体的には：

  • <h6>要素と要素は<h4>、スタイルシートで指定した色と背景画像を使用してレンダリングされます。

  • CSS で指定したフォントではなく、すべてが Arial で表示されます。

  • クラス名が無視されているようです (たとえば、a.Button書式設定は適用されません。以下のようなスタイルを定義すると、無視されます。)

      div.MapPopup { background:pink; }

何か案は？CSS がまったく機能しなくても驚かなかったでしょうが、部分的にしか機能しないのは奇妙です。

アップデート

これをよりよく説明するためのスクリーンショットを次に示します。<div class="MapPopup">CSS に従ってどのようにレンダリングされるかを示すために、ページのさらに下 (黄色) にマークアップを再現しました。

代替テキスト

4

4 に答える 4

6

示唆されているように、何が起こっているのかを確認するために Firebug を使用しました。Google は次の 2 つの厄介なことを行っているようです。

  1. HTML からすべてのクラス属性を取り除いています。
  2. あらゆる種類のハードコードされたスタイルが放り出されています。

これは、Google によって挿入された最初の 2 つのラッパーと一緒に私の HTML です。

<div style="font-family: Arial,sans-serif; font-size: small;">
    <div id="iw_kml">
        <div>
            <h6>Concession</h6>
            <h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
            <p>
                Description goes here</p>
            <a target="_blank"><span />View details </a>
        </div>
    </div>
</div>

ご覧のとおり、私のクラス (たとえば、タグ内のMapPopup最初divのButtonなど<a>) はすべて取り除かれています。

これを知っていれば、Google の干渉を回避し、マップ全体!importantでコンテナを使用してターゲットを設定することができます。divそれでも、これは煩わしく、予想外に不器用です。

于 2008-10-16T14:56:50.790 に答える
2

KML ブロック内の HTML に関連するさらに不快な点:好むと好まざるとにかかわらず、<description>すべてのリンクには属性が与えられます。target="_blank"私は現在、jQueryを使用してそれを元に戻す方法を模索していますが、なんと難しいことでしょう。なぜ Google がこの HTML を改ざんする必要があると感じているのか、私には本当に理解できません。

公式 Google グループのこのスレッドも参照してください。

于 2008-10-17T21:18:54.153 に答える
1

同様の問題がありました。マーカーをどのように実装しているか、InfoWindow を使用しているか、.addListener を使用しているかはわかりませんが、「ポップアップ バブル」内 (マーカー上) で動作するように CSS スタイルを設定する必要がありました。 「インライン スタイリング」と呼ばれるものを使用します。したがって、InfoWindow に渡す変数があります。いくつかのオプションで変数「マーカー」を初期化し、「マップ」インスタンスを作成したと仮定すると、コード例は次のようになります。

/*start of myHtml2 variable*/
var myHtml2 = "<div style=\"background-color:lightgray\"><div style=\"padding:5px\"><div
style=\"font-size:1.25em\">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style=\"padding:5px\"><tr><td><img src=\"A lake.jpg\"
width=\"75px\" height=\"50px\"></td><td>More text<br/>Again, more text<br/><div
style=\"font-size:.7em\">Last text</div></td></tr></table></div></div>"
/*end of variable*/

var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
 /*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){  
infowindow2.open(map, marker);
});

css スタイリング コードが煩雑であることはわかっていますが、頭の中で css を使用して、またはスタイル シートから、「バブル ポップアップ」内で複雑な css スタイリングを使用する方法を見つけていません。適切にレンダリングされません。

于 2011-08-04T22:10:24.437 に答える
0

私の最初の推測では、CSS の特異性に関する問題が発生しているということです。http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/に良い記事があるので、コンテナ要素 ID を含めることができれば役立つかもしれません.

これで問題が解決しない場合はお知らせください。さらにアイデアを考えます。

于 2008-10-15T03:25:28.520 に答える