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

【问题标题】：Leaflet map is not showing the line from gpx file传单地图未显示 gpx 文件中的行
【发布时间】：2017-10-31 06:38:58
【问题描述】：

leaflet.js 地图有一个奇怪的问题。出于某种原因，即使显示了所有标记，地图上也不会出现轨迹线。它在一个独立的简单 html 页面中运行良好，但每当我将它嵌入到引导模板中时，它就会中断。我的 MVC .chtml 页面有以下代码，并且 jquery 是从 Layout 页面引用的。

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

   });

提前感谢您的帮助。

【问题讨论】：

假设您的 JavaScript 控制台中没有任何错误消息：尝试剥离“额外”功能，直到折线出现。
我认为这与集群插件有关。如果我不使用标记聚类，它可以正常工作。
@Tajuddin 那么您的问题中没有足够的信息来帮助您。在你的 JS 代码中没有任何地方调用集群插件。
对不起，我已经删除了集群部分以减少代码块。我现在在原帖中添加了。
所以您实际上是在进行 2 次 AJAX 调用：1 次用于 GPX，1 次用于聚类 JSON 标记。当您说“如果我不使用标记聚类它可以正常工作”时，您的意思是如果您摆脱了第二个 AJAX 调用，或者如果您将L.markerClusterGroup 替换为L.featureGroup，它会起作用吗？顺便说一句，您似乎没有将 markers 添加到地图中。

标签： javascript jquery asp.net-mvc twitter-bootstrap leaflet

【解决方案1】：

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

svg { width: 100%; }

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

【讨论】：