30

Google マップ バージョン 3.14 では、カスタム情報ウィンドウに追加された新しい CSS ルールがいくつかあります。infobox プラグインを使用すると、多くの要素スタイルが上書きされます。

例えば：

.gm-style div,.gm-style span,.gm-style label,.gm-style a {
    font-family: Roboto,Arial,sans-serif; 
    font-size:11px;
    font-weight:400
}

.gm-style div,.gm-style span,.gm-style label {
    text-decoration:none
}

.gm-style a,.gm-style label {
    display:inline
}

.gm-style div {
    display:block
}

.gm-style img {
    border: 0; 
    padding: 0;
    margin: 0
}

「！重要」でこのGoogleスタイルを上書きする必要があることを除いて、それを変更する方法はありますか?

編集：

フォント「Roboto」も読み込まれます。パフォーマンスを気にするなら、それは本当に素晴らしいことではありません。

EDIT2：

OK、!important は必要ありません。CSS セレクターの特異性を高めることで、Google スタイルを上書きすることも可能です。しかし、これは、すべての Google スタイルを上書きする必要があることに変わりはありません。また、roboto フォントも読み込まれます。

4

11 に答える 11

12

私が見る限り、新しい css ルールは Web 全体のすべてのマーカー、コントロール、および情報ウィンドウのスタイルを壊すことが保証されているため、公式リリースの一部になるのに十分長く 3.exp バージョンにとどまらない可能性があります。それまでの間、このような重大な変更から身を守るために。おそらく次の 2 つのことを行う必要があります。

1 マップ API へのリンクにバージョンを設定します。何かのようなもの

<script src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true" type="text/javascript"></script>

を使用すると、マップ API の現在のリリース バージョンに常にアクセスできるようになります。より保守的になりたい場合は、メジャー リリースとマイナー リリースも指定できます。メジャー バージョンとマイナー バージョンを指定すると、通常のリリース スケジュールの一環として Maps API の更新をテストできます。ラップされたモバイル アプリケーションの一部としてマップ API にアクセスしている場合、ユーザーがいつアプリを更新するかを制御することはできません。そのため、v=3 を設定するだけで、マップ css の変更からアプリを隔離することができます (下記2.参照）

2 マーカー、コントロール、または情報ウィンドウのスタイルを設定して、スタイルをより適切に制御できるようにします。たとえば、次のような html のマーカーがある場合

<div class="my-marker">...</div>

次のようなCSSルールによって、マップAPIがフォントサイズを設定するのを防ぐことができます

div.my-marker {
  font-size: 18px;
  ...
}

次のようなマップAPIスタイルが与えられていることに注意してください

.gm-style div {
  font-size: 11px;
  ...
}

要素の絶対サイズ、相対的な測定値を指定する必要があります。たとえば、em では font-size: 11px; などの潜在的な変更から保護されません。

于 2013-08-20T04:15:09.277 に答える
6

私は同じ問題を抱えていて、イベントリスナーを追加した後、Emadsの回答はうまくいきました。

google.maps.event.addListener(map, 'idle', function()
{
    jQuery('.gm-style').removeClass('gm-style');
});

問題は、Google が Roboto フォントをロードするのを止める方法がまだ見つからないことです。

編集:まあ...それを止めるための非常に簡単な方法があります。次のように、GET を使用して古いバージョンの Google API をロードするだけです。

<script src="http://maps.google.com/maps/api/js?v=3.13&sensor=false"></script>

この API バージョンでは、Google は gm-style をまったく変更しません。したがって、クラスやスタイルをオーバーライドする必要はありません。

于 2013-08-19T13:45:13.623 に答える
2

InfoBox は、オプションでスタイル要素も提供します

var labelOptions = {
  content: label,
  boxStyle: {
  //Insert style here
  },
  .
  .
}
于 2013-11-27T13:31:11.830 に答える
2

この問題をフォローしている方は、このスレッドの Google による投稿を参照してください: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

于 2014-04-23T12:13:38.967 に答える
1

これは、要素がインラインではなく CSS によってスタイル設定されるようになったため、バージョン 3.14 での重大な変更です。

ラベルと UI 要素で使用されるデフォルトのフォントが変更されました。UI 要素は API によって CSS でスタイル設定されます。つまり、マップ上の DOM 要素をターゲットとするカスタム CSS を新しいデフォルト スタイルの代わりに適用する場合は、いくつかの調整が必要になる場合があります。

詳細については、ビジュアル リフレッシュの変更を参照してください。

これは、まったく効率的ではない子孫セレクター (div の子で!) を使用するため、Google マップによるあまり良い動きではありません。

これを修正するには、次のような非常に具体的なものが必要になります。

指定された HTML

<div class="gm-style">
 <div class="myClass-parent">
    <div class="myClass">Lorem ipsum dolor</div>
 </div>
</div>

次のようなものを試してください

.myClass-parent > div.myClass 
{
  font-weight:600;
}

単に div.myClass をスタイリングするだけでは機能しない場合があります。

于 2013-09-16T10:45:21.860 に答える
1

私も、3.14 が導入されて以来、追加された gm スタイルと Roboto フォントの読み込みに苦労しています。

この問題は、Google マップ API コードベースで「バグ」として報告されていることがわかりました。http://code.google.com/p/gmaps-api-issues/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summaryで星を付けてコメントしてください%20Stars%20ApiType%20Internal&groupby=&sort=&id=6078

于 2014-03-25T22:56:03.480 に答える
0

Google が古いバージョンの動作を変更したため、v1.13 をロードしても機能しなくなりました。新しいスタイルとロボット フォントは常に読み込まれます。私の新しい解決策は、すべてのスタイルシートを個別のファイルに保存し、次のスクリプトを含めることです。

google.maps.event.addListener(map, 'idle', function()
{

    $('style').remove();

});

これにより、Google API によって書き込まれたすべてのスタイル タグが削除され、独自のスタイルが保存されたままになりますが、ロボット フォントは引き続き読み込まれます。それを止める方法が見当たりません。

于 2014-02-20T12:51:46.673 に答える