2

3 つの入力フィールドからのテキストが表示される Google マップの情報ウィンドウを使用しています。最初の入力フィールドは TITLE、2 番目の ADDRESS (標準のGoogle オートコンプリートを使用)、3 番目の DESCRIPTION です。すべてがユーザーフレンドリーに見える<br/>ので、それらの間に追加したので、各入力は情報ウィンドウに別々に表示されます。これが私がやった方法です：

return (name || "") + "<br/>" +
       (addressOrCoordinates || "") + "<br/>" +
       (additionalDetails || "");

しかし、アドレスが少し長くなると縦スクロールが表示されます。これは、説明フィールドに 300 文字を入力すると、情報ウィンドウに縦スクロールが表示されず、情報ウィンドウのサイズにうまく適応するため、奇妙です...

だから私は削除しようとし<br/>ましたが、アドレスが何マイルも長くても、垂直スクロールなしですべてが機能します。だから私はそれ<br/>がアドレスを台無しにしていると思ったので、もう少しテストし<br/>ました。

したがって、情報ウィンドウに通常のテキストが含まれている場合、テキストがたくさんあり、このテキストが分離されていても、垂直スクロールは表示されませんが、アドレスの前<br/>に使用すると垂直スクロールが表示される<br/>のはなぜですか? この垂直スクロールが表示されずに、アドレス入力を情報ウィンドウの新しい行に移動させる他の方法はありますか?

ところで、CSS オーバーフローが機能せず、API v3 を使用しています

4

4 に答える 4

4

これは、私が長い間見てきた中で最もクレイジーなバグの 1 つです。

なぜこれが起こるのかはわかりませんが、私にとっては、次の CSS の太字でマークされた部分 (font-family) を削除すると機能します。

#mapE { text-align:center; font-family:Arial、Helvetica、sans-serif; 色:#333; フォントサイズ:14px; オーバーフロー:非表示; }

それはフォントの幅の問題ではありません (たとえば、Verdana を使用しても問題はありません。これは よりもはるかに広いですArial)。API は、infoWindow が開く前にサイズを計算する必要があります。使用時にエラーが発生しArialました。

したがって、Arial 以外の基本的な Windows フォントを使用することをお勧めします (Tahoma問題ないはずです)。

于 2013-02-09T23:12:06.623 に答える
2

だから私はあなたと同じような状況にありました。infoWindow 内のコンテンツをスクロール (X スクロールではなく Y スクロールのみ) したかったのですが、Google API infoWindow の自動スクロールがコンテンツを隠していたため、無効にしたかったのです。多くの人と同じように、私は情報ウィンドウのコンテンツを div で囲み、#info_window という ID を付けました。次に、コンテンツに maxheight があり、スクロール バーがコンテンツを覆わないように配置されていることを確認したいと考えました (また、スクロール バーが垂直方向にのみスクロールする必要がありましたが、別の考慮事項です)。最後に、ここにある回答の 1 つを使用して、Google の自動スクロール バーではなく MY スクロール バーのみが表示されるようにしました。したがって、私のCSSは次のようになりました。

#info_window{
  width: 350px;
}

.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
  max-height: 280px;
  padding: 0px 10px 5px 5px;
  overflow-y: scroll;
  overflow-x: visible;
}

.gm-style-iw div {
  overflow:visible !important;
}
于 2014-02-27T11:42:48.410 に答える
2

これは、CSS に追加した場合にも機能します。

.gm-style-iw div {overflow:visible !important;}

情報ウィンドウの内容によっては、醜い垂直スクロール バーが完全に削除されます。これは、Google API によって提供される計算されたスタイルを上書きします。

于 2013-11-11T20:48:02.300 に答える
1

情報ウィンドウのコンテンツに追加white-space: nowrap;すると、スクロールバーの問題も解決するようです。もちろん、これが実行可能なオプションであるかどうかは、実際のコンテンツによって異なりますが、オプションになる可能性があります。

于 2014-05-19T13:06:57.837 に答える