リーフレット/ Googleマップベースレイヤー/マーカーが表示されない

Leafletの新機能。現在、ネイティブのGoogleマップからLeafletにプロジェクトを移行しようとしています。レイヤー管理と、より優れた「ロードマップ」スタイルのベースマップを使用するオプションによって、リーフレットに引き付けられた。

Google MapタイルをLeafletのベースマップとして使用するためのプラグインをダウンロードしました。プラグインをベースレイヤーとして使用できます。

しかし、私は問題を発見し、その理由を理解するためにLeafletを十分に経験していません。他のベースレイヤーで表示できるマーカーがありますが、Googleでは表示されません。Zオーダーを強制的に高くしてみましたが（1000など）、違いはありません。マーカーの不透明度は完全です1.0

マーカーは他のすべてのレイヤー（OSMなど）に表示されます。ベースをGoogle（衛星または地図）に切り替えると、マーカーは表示されなくなりますが、Google以外のベースに切り替えると再び表示されます。

私がGoogleベースレイヤーを追求している理由は、Googleが（私が知る限り）関心のある領域で詳細な一貫した航空写真タイルを提供している唯一のプロバイダーだからです。他のマップを使用したいが、レイヤーマネージャーを介してGoogleの「衛星」ビューに切り替えるオプションがある。

現在Leaflet v0.4.5を使用していますが（v0.4も試しました）、異なるブラウザー（IE、FFなど）を使用すると同じ症状が発生します。

どんな援助にも感謝します。

簡単な修正：Z-indexを使用して正しい方向に進んでいました。これをあなた自身のcssファイルに追加してみてください（他のものを壊すかもしれません！私は単にマーカーを表示するためにそれを得ました）：

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}

リーフレットのベースマップとしてGoogleマップタイルを使用するプラグインをダウンロードしました

明確にするために、これはGoogleの利用規約に違反しているため、注意して続行してください。

他の場所に示されているz-indexの他のいくつかの数値が私の側で機能しました。ここからクロスポスト：https : //gist.github.com/crofty/2197042#comment-1234339

.leaflet-google-layer{
    z-index: 0 !important;
}
.leaflet-map-pane{
    z-index: 100;
}

（これをWebページのCSSまたは<style>セクションに配置します）

これをあなたのCSSに入れてみてください：

.leaflet-google-layer {
    z-index: inherit;
}

これは同じ状況で私を助けました