☰

リーフレットの描画タイルがばらばらになっている 質問する

tag-icon • tag-icon javascript leaflet
リーフレットの描画タイルがばらばらになっている 質問する

リーフレット マップをインスタンス化していますが、タイルは基本的にページ全体に散らばっています。マップは div 内にあるものの、ほとんどのタイルはその境界を尊重していません。

<div class="widget-content listing-search-map-widget-content">
    <div class="ih-map" 
         id="Map_5333811_16"
         style="height:450px;"
         data-centerpoint="38.573955 -121.442478" 
         data-mousewheel="true" 
         data-maptype="TERRAIN"
         data-zoom="8"
        >
    </div>
</div>

JavaScript は次のようになります:

mapOptions = {
               attributionControl: true,
               center: {
                   lat: 38.573955
                   lng: -121.442478
               },
               centerpoint: "38.573955,-121.442478", 
               layers: {},
               maptype: "Terrain", 
               scrollWheelZoom: false, 
               zoom: 8
            }

var map = L.map( "Map_5333811_16", mapOptions );

タイルがあちこちにプロットされる原因は何でしょうか? いくつかのタイルは div の境界内にありますが、残りのタイルは境界内にありません。ここで何が起きているかのスクリーンショットをご覧ください:

ごちゃ混ぜのタイルのスクリーンショット

ベストアンサー1

これは、Leaflet CSS ファイルが見つからないか、そのファイルのバージョンが正しくないことの症状のようです。

おすすめ記事