Mapbox Leaflet Polyline 在地图外创建且不可见

Question

将此示例放入 bootstrap 模板时，折线和圆不显示。当我检查 $('path') 时，我发现这些线实际上一直延伸到左上角，并且不可见。我已经花了大约 3 个小时，但仍然没有弄清楚问题是什么。

如您所见，标记等内容显示正常，但折线和圆圈等未显示在地图上。

这是回购协议：https://github.com/zylajoel/polyExample 相关文件是：

<!-- index.html -->
<div class="content-wrap">
    <!-- main page content. the place to put widgets in. usually consists of .row > .col-md-* > .widget.  -->
    <main id="content" class="content" role="main">
        <div class="map-container">
            <div id='map'>
            </div>
        </div>
    </main>
</div>




// index.js
L.mapbox.accessToken = 'pk.eyJ1Ijoiam9lbHp5bGEiLCJhIjoiZDU4YTUxMDQ4NDM3OTZkZDA5OThiMzYzNjA0ODRmN2EifQ.CWKDLwKY-bUz_6XYT5bGpg';

var map = L.mapbox.map('map', 
    'mapbox.satellite', 
    {
      center: [35.2269, -80.8433],
      zoom: 2,
      featureLayer: true,
      tileLayer: true,
      gridLayer: true
    });

    // add some markers
    L.marker([37.9, -77], {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bus',
            'marker-color': '#fa0'
        })
    }).addTo(map);

    // with popup
    L.marker([10.9, -50], {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bus',
            'marker-color': '#fa0'
        })
    // this should be a handlebars template
    }).addTo(map).bindPopup('<p>Hello world!<br />This is a nice popup.</p>');
    //.openPopup();




    // make a point via geojson
    var geoJSONExample = { "type": "FeatureCollection",
      "features": [
        { "type": "Feature",
          "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
          "properties": {"prop0": "value0"}
        }
      ]};

    var geoJSONExample1 = { "type": "FeatureCollection",
      "features": [
        { "type": "Feature",
          "geometry": {"type": "Point", "coordinates": [95.0, 10]},
          "properties": {"prop0": "value0"}
        }
      ]};

    L.geoJson(geoJSONExample, {
    pointToLayer: L.mapbox.marker.style,
    }).addTo(map);

    L.geoJson(geoJSONExample1, {
    pointToLayer: L.mapbox.marker.style,
    }).addTo(map);


    // draw a line HELP
    var thePolyline = L.polyline([[102.0, 0.5], [95.0, 10], [10.9, -50]], {
        color: 'red'
    });
    thePolyline.addTo(map);


    // draw a line HELP
    var pointA = new L.LatLng(28.635308, 77.22496);
    var pointB = new L.LatLng(28.984461, 77.70641);
    var pointList = [pointA, pointB];

    var firstpolyline = new L.Polyline(pointList, {
        color: 'red',
        weight: 3,
        opacity: 0.5,
        smoothFactor: 1

    });
    firstpolyline.addTo(map);

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



// application.css

#map { 
  width: 100%; 
  height: 100%;
}

.map-container {
  height: 500px;
  padding: 10px;
  width: 100%;
}

有什么想法吗？

Answer 1

问题是 Leaflet 与您正在使用的单一应用程序模板的 CSS 冲突。 css/application.css 中的 CSS 正在重置 svg 元素的尺寸。

您需要更改 css/application.css 并删除 svg 选择器的宽度和高度属性：

svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Trying to get SVG to act like a greedy block in all browsers */
  display: block;

  /* Remove these: */
  /* width: 100%; */
  /* height: 100%; */
}

如果您仍然需要重置其他 svg 元素的尺寸，只需使用不同的选择器即可。

Mapbox Leaflet Polyline 在地图外创建且不可见

Mapbox Leaflet Polyline being created outside of map and not visible

leaflet

mapbox

polyline