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

【问题标题】：Mapbox Leaflet Polyline being created outside of map and not visibleMapbox Leaflet Polyline 在地图之外创建且不可见
【发布时间】：2015-11-14 05:01:40
【问题描述】：

将此示例放入引导模板时，折线和圆不会显示。当我检查 $('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%;
}

有什么想法吗？

【问题讨论】：

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

标签： leaflet mapbox polyline

【解决方案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 元素的尺寸，只需使用不同的选择器即可。

【讨论】：