2016-02-14 78 views
0

我正在關注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通過,或者它不是必需的?

謝謝!

回答

0

你的代碼沒問題。它與我形成這些依賴關係(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密鑰。