传单地图不显示路径答案

【问题标题】：Leaflet map does not display path传单地图不显示路径
【发布时间】：2015-04-30 05:02:07
【问题描述】：

我正在尝试使用 Angular 的 Leaflet 的基本功能。我有以下 html 片段：

在控制器中，我做了以下事情：

$scope.markers = [
                 {
                    lat: 52.5,
                    lng: 0,
                    focus: true,
                    //message: "Hey, drag me if you want",
                    title: "Marker",
                    draggable: true,
                    label: {
                        message: "Hey, drag me if you want",
                        options: {
                            noHide: true
                        }
                    }
                },
                {
                    lat: 51,
                    lng: 0,
                    focus: true,
                    title: "Marker",
                    draggable: true,
                    label: {
                        message: "Hey, drag me if you want",
                        options: {
                            noHide: true
                        }
                    }
                }

            ];
$scope.europeanPaths = {
                p1: {
                    color: 'red',
                    weight: 8,
                    latlngs: [
                        { lat: 51.50, lng: -0.082 },
                        { lat: 48.83, lng: 2.37 },
                        { lat: 41.91, lng: 12.48 }
                    ],
                    message: "<h3>Route from London to Rome</h3><p>Distance: 1862km</p>",
                }
            };
$scope.london = {
                lat: 51.505,
                lng: -0.09,
                zoom: 5
            };

标记很好地显示出来，地图以伦敦为中心。但路径不会显示。当我通过“路径”指令进行调试时，我发现带有路径坐标的图层被添加到地图中。

我对 Angular 还很陌生，因此试图了解幕后工作的原理。 TIA。

（我正在尝试为它创建一个 Fiddle！）

【问题讨论】：

请添加代码您如何设置地图（添加标记、路径）。
我使用的传单指令如下：根据传单指令网站上的演示，这应该可以工作（除非我遗漏了什么！）
对我来说看起来不错，请查看this fiddle。可能是过时的库，或者您添加的方向错误？
非常感谢您的提琴。您能解释一下“以错误的方向添加它们”是什么意思吗？
我的意思是按正确的顺序将脚本文件添加到 html 文件中。 AngularJS，然后是 Leaflet，然后是 Leaflet-directive。

标签： angularjs angularjs-scope leaflet

【解决方案1】：

我遇到了同样的问题，原因是包含样式的css

svg{
width: 100%;
height: 100%;
}

修正

 .angular-leaflet-map svg{
   width: initial;
   height: initial;
 }

解决问题

【讨论】：