Leaflet 正在地图外部创建且不可见的Mapbox传单多段线

将此示例放在引导模板中时，不会显示多段线和圆。当我检查$（'path'）时，我看到这些行实际上一直到左上角，并且不可见。我大概已经花了3个小时，但仍然没有弄清楚问题出在哪里

如您所见，标记之类的东西显示得很好，但多段线和圆等不会显示在地图上

以下是回购协议： 有关档案包括：

<!-- 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%;
}

//index.js
L.mapbox.accessToken='pk.eyj1ijoiam9lbhp5bgeilcjhijoizdu4ytuxmdq4ndm3otzkzda5othimznja0odrmn2eifq.CWKDLwKY-bUz_6XYT5bGpg'；
var map=L.mapbox.map（'map'，
“地图盒，卫星”，
{
中间：[35.2269，-80.8433]，
缩放：2，
featureLayer：没错，
蒂莱耶：是的，
网格层：真的
});
//添加一些标记
L.标记（[37.9，-77]{
图标：L.mapbox.marker.icon({
“标记大小”：“大”，
“标记符号”：“总线”，
“标记颜色”：“fa0”
})
}).addTo（地图）；
//带弹出窗口
L.标记（[10.9，-50]{
图标：L.mapbox.marker.icon({
“标记大小”：“大”，
“标记符号”：“总线”，
“标记颜色”：“fa0”
})
//这应该是一个把手模板
}).addTo（map）.bindpoop（“你好，世界！
这是一个很好的弹出窗口。
”）；
//.openPopup（）；
//通过geojson表达观点
var geoJSONExample={“类型”：“FeatureCollection”，
“特点”：[
{“类型”：“特征”，
“几何学”：{“类型”：“点”，“坐标”：[102.0,0.5]}，
“属性”：{“prop0”：“value0”}
}
]};
var geoJSONExample1={“类型”：“FeatureCollection”，
“特点”：[
{“类型”：“特征”，
“几何学”：{“类型”：“点”，“坐标”：[95.0,10]}，
“属性”：{“prop0”：“value0”}
}
]};
L.geoJson（geoJSONE示例{
pointToLayer:L.mapbox.marker.style，
}).addTo（地图）；
L.geoJson（geoJSONExample1{
pointToLayer:L.mapbox.marker.style，
}).addTo（地图）；
//划线帮助
变量polyline=L.多段线（[[102.0,0.5]，[95.0,10]，[10.9，-50]{
颜色：“红色”
});
polyline.addTo（映射）；
//划线帮助
var pointA=新的L.LatLng（28.635308,77.22496）；
var pointB=新的L.LatLng（28.984461,77.70641）；
var pointList=[pointA，pointB]；
var firstpolyline=新的L.多段线（点列表{
颜色：“红色”，
体重：3，
不透明度：0.5，
平滑因子：1
});
firstpolyline.addTo（映射）；
变量圆=L圆（[51.508，-0.11]，500{
颜色：“红色”，
填充颜色：“#f03”，
填充不透明度：0.5
}).addTo（地图）；
//application.css
#映射{
宽度：100%；
身高：100%；
}
.map容器{
高度：500px；
填充：10px；
宽度：100%；
}

---

有什么想法吗？

问题是传单与您使用的单个应用程序模板的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元素的维度，只需使用不同的选择器。

您需要提供一个可调试的实例。@tmcw，添加了repo和相关代码。