Leaflet Karte zeigt nicht die Zeile von GPX-Datei

Question

Ich habe ein seltsames Problem mit der Map leaflet.js. Aus irgendeinem Grund erscheint die Weglinie nicht auf der Karte, obwohl alle Markierungen angezeigt werden. Es funktioniert gut in einer eigenständigen einfachen HTML-Seite, aber wenn ich dies in die Bootstrap-Vorlage einbetten bricht es. Meine MVC .chtml Seite hat den folgenden Code und jquery wird von der Layoutseite referenziert.

 <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> 

Die Clustering-Verwendung jQuery erhalten Anforderungsdaten zu holen wie unten -

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); 

    }); 

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Schließlich fand ich das Problem, nachdem alle css, js und andere Skripte Dateien zu trennen, um die Ursache des Problems zu verengen. Es war tatsächlich die benutzerdefinierte CSS-Datei, die das Attribut svg width auf 100% gesetzt hat. Ich habe diese Zeile entfernt und es funktioniert jetzt gut. Die folgende Zeile wurde entfernt.

svg { width: 100%; } 

Ich hoffe, dies könnte anderen mit ähnlichen Problemen helfen.