在 Angular 组件中使用 Leaflet

Question

我是 Angular 工作流程的新手。我正在尝试使用 Leaflet 将地图添加到我的页面。我想通过组件来做到这一点。 为了实现它（徒劳），我遵循了两条说明（在评论中列出）。

您可以在此处查看结果： http://oye-api.herokuapp.com/test.html

但我什么都没有。没有地图，但也没有错误。我不知道我做错了什么。你能帮忙吗？

谢谢！

这就是我所拥有的：

page.html

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-mocks/angular-mocks.js"></script>

<script src="app.module.js"></script>
<script src="map/map.module.js"></script>
    <script src="map/map.component.js"></script>

<map></map>

map.component.js

angular.
  module('map').
  component('map', {
    templateUrl: 'map/map.template.html',
    controller: MapController
    }
  );

MapController.$inject = ['$scope'];

function MapController($scope) {
    var ctrl = this;
    angular.extend(ctrl, {
        san_fran: {
            lat: 37.78,
            lng: -122.42,
            zoom: 13
        },
        events: {},
        layers: {
            baselayers: {
                osm: {
                    name: 'OpenStreetMap',
                    url: 'https://{s}.tiles.mapbox.com/v3/examples.map-i875mjb7/{z}/{x}/{y}.png',
                    type: 'xyz'
                }
            }
        },
        defaults: {
            scrollWheelZoom: false
        }
    });
}

map.template.html

<leaflet center="san_fran" markers="markers" event-broadcast="events" defaults="defaults" id='map'></leaflet>

app.module.js

'use strict';

angular.module('oyeApp', [
  'ngRoute',
  'map'
]);

map.module.js

'use strict';

angular.module('map', [
  'ngRoute'
]);

Answer 1

添加 css 类以显示地图 div 请参考以下链接： http://leafletjs.com/examples/quick-start/