Question

您可以看到at this link的我的地图渲染不正确，它超出了父级的边界，并放置在整个页面上。我在这里查看了其他问题，他们似乎提到没有适当的JS / CSS传单。我已经在本地确保它们都在我的构建中并且仍然会获得相同的效果。我还在父div上设置了一个高度。还有什么可能出问题呢？谢谢

这是我渲染地图的方式：

          map = L.map('cc-map',{scrollWheelZoom:false}).setView([parsed_map_vars.city.location.lat, parsed_map_vars.city.location.lng], 15);
          var mbURL = 'https://api.mapbox.com/styles/v1/pandabrand/cj5wzm2s57tap2rocbuf8j6no/tiles/256/{z}/{x}/{y}?access_token=',
          mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>';
          L.tileLayer(mbURL + parsed_map_vars.map_info.api_key, {attribution: mbAttr}).addTo(map);
          markers = L.featureGroup();
          for(var x = 0; x < parsed_map_vars.locations.length; x++) {
            var feature = parsed_map_vars.locations[x];
            var marker_place = L.marker([feature.coords.lat, feature.coords.lng],{icon:ccIcon, riseOnHover:true, riseOffset: 3000});
            marker_place.bindPopup('<div class=" cc-marker__popup strong">'+feature.title+'</div>');
            markers.addLayer(marker_place);
            feature.marker_id = markers.getLayerId(marker_place);
            $('#'+feature.location_id).attr('data-cc-marker', feature.marker_id);
            $('#'+feature.location_id).addClass(feature.marker_id);
            marker_place.on('click', scrollToDetail);
          }
          markers.addTo(map);
          map.fitBounds( markers.getBounds() );

如何修复Leaflet奇数渲染

0 个答案: