传单角指令空白地图答案

【问题标题】：Leaflet angular directive blank map传单角指令空白地图
【发布时间】：2016-02-14 06:48:44
【问题描述】：

我正在关注 Leaflet-angular-directive 的基本教程。我可以在浏览器中看到传单地图组件显示，但地图是空白的。例子：

<html ng-app="demoapp">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
    <script src="../dist/angular-leaflet-directive.min.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <script>
        var app = angular.module("demoapp", ['leaflet-directive']);
        app.controller("BasicFirstController", [ "$scope", function($scope) {
            // Nothing here!
        }]);
    </script>
  </head>

  <body ng-controller="BasicFirstController">
    <leaflet width="100%" height="480px"></leaflet>
    <h1>First steps, basic example</h1>
  </body>
</html>

我没有看到 API 密钥或磁贴 url 传递到哪里，或者它不是必需的？

谢谢！

【问题讨论】：

标签： angular-leaflet-directive

【解决方案1】：

你的代码没问题。它适用于我与这些依赖项（Angular 1.4.9）：

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="angularLealeft/angular-leaflet-directive.min.js"></script>

不需要 API 密钥。

【讨论】：