2

L.markerClusterGroup を持つ Leaflet マップがあります。次のようになります。

ここに画像の説明を入力

しかし、(PDF に) 印刷すると、次のようになります。

ここに画像の説明を入力

背景色がないことに注意してください。

ポイントは次のように作成されます。

L.DivIcon({ html: '<div><span>' + (childCount + tally) + '</span></div>', className: 'marker-cluster' + <my own css>, iconSize: new L.Point(40, 40) });

「自分の css」は、次のいずれかの css クラスです。

background: rgba(255, 0, 192, 0.3); !important;
border: 1px solid #666;

または

background: rgba(9, 243, 33, 0.6);!important;
border: 1px solid #666;

他の誰かが同じ問題を抱えたことがありますか?

4

1 に答える 1

1

私の問題は悪いCSSでした。background: rgba(255, 0, 192, 0.3); !important;の代わりにbackground: rgba(255, 0, 192, 0.3) !important;。

動作する CSS は次のとおりです。

@media print {

  .my-own-css1, .my-own-css2, {
        -webkit-print-color-adjust: exact !important;         
         background: rgba(255, 0, 192, 0.3) !important;
    }
}
于 2016-08-24T13:35:32.703 に答える