2

Leaflet を使用して小さな例を作成し、Web アプリで使用しようとしていますが、いくつかの問題があります。

私はすでに彼らのページのクイック スタート ガイドからスタンドアロンのリーフレットの例を作成しました。これには、静的なマップ div があり、いくつかのオブジェクト ( marker、circleおよびpolygon) がオーバーレイされています。ただし、私のアプリでは、マップ div コンテナーは jquery を使用して動的に配置およびサイズ変更されます。これは非常に複雑なアプリであるため、ここにコード全体を投稿することはできません。

問題は、div を正しく処理した後、マップが div に (どこにあるとしても) 正しく描画されることですが、オーバーレイ レイヤーではmarker. circleとはpolygon表示されません。

    var map = L.map(this.$el.attr('id')).setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.cloudmade.com/<APIKEY>/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
        maxZoom: 18
    }).addTo(map);

    var circle = L.circle([51.508, -0.11], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(map);

    var polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
    ]).addTo(map);

    var marker = L.marker([51.5, -0.09]).addTo(map);
    marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
    circle.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

マップとオブジェクトを作成する方法に問題はないと信じておりmap.invalidateSize()、div のサイズ変更全体の後に呼び出すことさえあります。そして興味深いのは、ポップアップが正しい位置に表示されているのに、その後ろに円が表示されていないことです。

問題は、div コンテナーのサイズを変更して配置する方法にある可能性があります。CSSdiv コンテナーで使用する必要がある特定のプロパティはありますか?

すべての助けをありがとう。

4

1 に答える 1

1

JSFiddleこの問題について寝た後、問題を再現する例を作成することを考えました。ただし、どんなに頑張っても、より単純なスタンドアロンの例で問題を再現できなかったため、アプリ内で問題が競合している必要がありました。

すべての症状はCSS問題を示していましたが、私のCSS範囲は十分に限定されていました。したがって、私の最後の理論は、使用していたライブラリで競合する必要があるというものでした。

それは正しいことが判明しました。問題はCSS、ライブラリNVD3のスタイルシートの競合でした

于 2012-08-10T13:10:10.933 に答える