为什么通过角度指令使用geojson数据不显示在leafletjs地图上？答案

【问题标题】：why doesn't the geojson data show up on a leafletjs map when used via an angular directive?为什么通过角度指令使用geojson数据不显示在leafletjs地图上？
【发布时间】：2015-03-24 15:13:29
【问题描述】：

我试图在地图上显示一些geoJSON数据，使用leafletjs和一个角度指令（现有的角度leafletjs指令都没有做我以后需要做的事情，所以我开始编写自己的，也许是为了稍后合并）。 geoJSON 由于某种原因没有显示出来。

我开始使用在 http://jsfiddle.net/8QHFe/127/ 找到的一个简单示例。

然后我把这个例子包装在一个角度指令中。打开的街道地图图层显示了，但 geojson 图层没有出现在任何地方！显然，当我添加我的 angularjs 指令时，我失去了一些东西，但是什么？还是别的什么？

显示我尝试的代码位于

http://plnkr.co/edit/pb7ZN5mIkZOU8AWTrtfY

<html ng-app="leafletExample">
<head>
    <title>Leaflet Example</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
</head>     
<body ng-controller="LeafletCtrl as ctrl"> 
<state-map id="haiti" style="width:450px;height:430px;"></state-map>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
        angular.module("leafletExample", [])
                .controller("LeafletCtrl", [function() {
                        this.msg = "puke";
                    }])
                .directive("stateMap", [function() {
                        return{
                            replace: false,
                            restrict: "E",
                            template: "<div></div>",
                            link: function(scope, element, attrs) {
                                var map = new L.map(element[0], {center: [18.53, -72.33], zoom: 12});
                                var osmCopyright = "Map data &copy; 2012 OpenStreetMap contributors";
                                var osmTile = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
                                var osmLayer = new L.TileLayer(osmTile, {minZoom: 8, maxZoom: 12, attribution: osmCopyright});
                                map.setView(new L.LatLng(18.53, -72.33), 9);
                                map.addLayer(osmLayer);

                                var haiti = {"type": "FeatureCollection", "features": [
                                        {"type": "Feature", "properties": {"name": "Haiti"}, "geometry": {"type": "Polygon", "coordinates": [[[-73.189791, 19.915684], [-72.579673, 19.871501], [-71.712361, 19.714456], [-71.624873, 19.169838], [-71.701303, 18.785417], [-71.945112, 18.6169], [-71.687738, 18.31666], [-71.708305, 18.044997], [-72.372476, 18.214961], [-72.844411, 18.145611], [-73.454555, 18.217906], [-73.922433, 18.030993], [-74.458034, 18.34255], [-74.369925, 18.664908], [-73.449542, 18.526053], [-72.694937, 18.445799], [-72.334882, 18.668422], [-72.79165, 19.101625], [-72.784105, 19.483591], [-73.415022, 19.639551], [-73.189791, 19.915684]]]}, "id": "HTI"}
                                    ]};
                                L.geoJson(haiti, {
                                    style: function(feature) {
                                        return {opacity: 0, fillOpacity: 0.5, fillColor: "#0f0"};
                                    }
                                }).addTo(map);
                            }
                        }
                    }]);
</script>
</body>
</html>

【问题讨论】：

标签： angularjs leaflet geojson

【解决方案1】：

主要是您的问题与 CSS 很简单。试试<state-map id="haiti" style="position:absolute;top:0;bottom:0;right:0;left:0;"></state-map>

尽管您应该考虑以下几点： - 传单应在 Angular 之前加载。
- 指令中的 replace 属性已被弃用。
- 你的链接功能有点疯狂；考虑使用控制器。
- A simpler example

【讨论】：