Question

将此示例放在引导程序模板中时，折线和圆圈不会显示。当我检查$（＆＃39;路径＆＃39;）时，我发现这些线实际上是向左上方，并且不可见。我花了大概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选择器的width和height属性：

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在地图外创建，不可见

1 个答案: