전단지 맵에 gpx 파일의 행이 표시되지 않습니다.

Question

leaflet.js 맵에 이상한 문제가 있습니다. 어떤 이유로 든 모든 마커가 표시 되더라도 흔적 선은지도에 표시되지 않습니다. 독립 실행 형 간단한 html 페이지에서 제대로 작동하지만 부트 스트랩 템플릿에이 템플릿을 삽입 할 때마다 중단됩니다. 내 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를 아래처럼 데이터를 가져 오기 위해 요청을 얻을 -

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와 다른 스크립트 파일을 분리 한 후 문제를 발견했다. 실제로 svg width 속성이 100 %로 설정된 맞춤 CSS 파일이었습니다. 나는 그 선을 제거하고 지금은 잘 작동하고있다. 다음 행을 삭제했습니다.

svg { width: 100%; } 

희망이 있으면 비슷한 문제가있는 다른 사용자에게 도움이되기를 바랍니다.