Question

我试图在地图上显示一些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>

Answer 1

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

虽然您应该考虑以下事项： - 应在Angular之前加载传单 - 该指令的replace属性已被弃用 - 你的链接功能有点疯狂;考虑使用控制器 - A simpler example

当通过角度指令使用时，为什么geojson数据不会出现在leafletjs地图上？

1 个答案: