2

Foursqure.com に似たようなことをしたいと考えています。彼らはあなたの現在地の地図を背景として使用しています。マップにリーフレットを使用しており、マップが表示されています。次のようなものを入れるだけだと思いました：

<div id="map">
    <h1>Welcome!</h1>
</div>

それではようこそ！マップに重ねて表示されます。しかし、私は素朴で、これはうまくいきません。誰でもこれを行う方法を提案できますか?

編集: これが私のカスタム CSS の一部です。私は Twitter ブートストラップを使用しているので、それも同様に機能します。html は、ここで示したものとほとんど同じです。

#map {
    width: 100%;
    height: 400px;
    z-index: 0;
}

.leaflet-container {
    background: #ffffff;
}
4

4 に答える 4

3

問題は、Leaflet が指定した 内のコンテンツを吹き飛ばしてしまう<div>ことです。Leaflet には空の が必要<div>です。

残りのコンテンツの下にマップを z-index するだけです。これは、子ではなく、マップ要素の兄弟である必要があります。

<div id="map"></div>
<h1>Welcome!</h1>

デモ

于 2012-12-18T21:53:05.993 に答える
2 
 z-index: -1;

0の代わりにこれを試してください

申し訳ありませんが、マップ内にヘッダーがあるため、これは機能しません... HTMLを再構築する必要があります..

于 2012-12-18T21:51:31.950 に答える
2

これを試して：

#map{
  position:fixed;
  width:100%;
  height:100%;
  z-index:0;
}

その他のコンテンツは、0 より大きい z-index を指定する必要があります

于 2012-12-18T21:16:03.560 に答える