Question

我对leaflet.js地图有一个奇怪的问题。由于某种原因，即使显示所有标记，轨迹线也不会出现在地图上。它在一个独立的简单html页面中工作正常，但每当我将它嵌入bootstrap模板时，它就会中断。我的MVC .chtml页面包含以下代码，并且从布局页面引用了jquery。

     <script src="https://maps.googleapis.com/maps/api/js?key=<key>" async defer></script>
    <link rel="stylesheet" href="http://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <script src="http://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css">
    <script src="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js"></script>
    <script src='~/Scripts/Leaflet.GoogleMutant.js'></script>
    <script src="~/Scripts/leaflet.markercluster-src.js"></script>
    <link href="~/Content/MarkerCluster.css" rel="stylesheet" />
    <link href="~/Content/MarkerCluster.Default.css" rel="stylesheet" />
    <script src="~/Scripts/app/GPX.js"></script>
     <div id="mapView">
                        <!-- This is the div that will contain the Google Map -->
                        <div id="lmap"></div>

                    </div>
<scripts>
    $(function(e){

        var lcontrol = new L.control.layers();
        var eb = new L.control.layers();
        //initialize map
        var map = null;
        var markers = [];
        var latlng = L.latLng(-30.81881, 116.16596);
       //set the layers
        var roadMutant = L.gridLayer.googleMutant({ type: 'roadmap' });
        var satMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'satellite' });
        var terrainMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'terrain' });
        var hybridMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'hybrid' });


        map = new L.map('lmap', {
            center: latlng, zoom: 6, maxZoom: 18, scrollwheel: false, layers: [roadMutant],
            streetViewControl: false, scrollWheelZoom: false, 
        });

        var track = new L.GPX("/media/fells_loop.gpx", {
            async: true
        }).on("loaded", function (e) {
            map.fitBounds(e.target.getBounds());
        });
        map.addLayer(track);

        map.on('focus', function () { map.scrollWheelZoom.enable(); });
        map.on('blur', function () { map.scrollWheelZoom.disable(); });

    var baseLayers = {
            "Streets": roadMutant,
            "Satellite": satMutant,
            "Terrain": terrainMutant,
            "Hybrid": hybridMutant,

        };

    map.addControl(new L.Control.Layers(baseLayers, { 'GPX': track }, { collapsed: true }));
}
</scripts>

集群使用jQuery get请求来获取如下所示的数据 -

 markers = L.markerClusterGroup({ chunkedLoading: true, spiderfyOnMaxZoom: true, maxClusterRadius: 100, showCoverageOnHover: true });

        //map.eachLayer(function (layer) {
        //    map.removeLayer(layer);
        //});
        L.Map.include({
            'clearLayers': function () {
                this.eachLayer(function (layer) {
                    this.removeLayer(layer);
                }, this);
            }
        });

    //clear markers and remove all layers
        markers.clearLayers();
        var h = $(window).height();
        var w = $(window).width();

    var atype = $('input:checkbox:checked.gp1').map(function () {
        return this.value;
    }).get(); // ["18", "55", "10"]

    var st = atype + "";
    //fetch data
    $.ajax({
        type: "GET",
        url: appUrl + "/Home/map", 
        data: {'atype': st},
        dataType: 'json',
        contentType: 'application/x-www-form-urlencoded',
        success: function (data) {

            $.each(data, function (i, item) {
                var img = (item.IconUrl).replace("~", "");
                var dpawIcon = L.icon({ iconUrl: appUrl + img, iconSize: [42, 42] });
                var id;
                var marker = L.marker(L.latLng(item.Latitude, item.Longitude), { icon: dpawIcon }, { title: item.Name });
                var content = "<div class='infoDiv'><h3><img src='" + appUrl + img + "' width='24' />" + item.Name + "</h3><p>" + item.Title + "</p><a href='#' data-value='" + item.AlertId + "' class='btn btn-success btn-sm' data-toggle='modal' data-target='#alertDetails'>Details</a></div>";
                id = marker._leaflet_id;
                marker.bindPopup(content);
                markers.addLayer(marker);

            });
        }

    })
   .done(function () {
       $(".loadingOverlay").hide();

      // $("#lmap").height(h-100).width(w-210);
       map.invalidateSize(true);

   });

提前感谢您的帮助。

Answer 1

最后，我在分离所有css，js和其他脚本文件之后发现问题，以缩小问题的根本原因。它实际上是自定义CSS文件，其svg width属性设置为100％。我已删除该行，现在工作正常。删除了以下行。

svg { width: 100%; }

希望这可以帮助处理类似问题的其他人。

宣传单地图未显示gpx文件中的行

1 个答案: