javascript - Angular openstreetmap 指令

Question

http://tombatossals.github.io/angular-leaflet-directive/examples/simple-example.html

这就是我需要的示例。

http://tomaszdziurko.pl/wp-content/uploads/2013/02/navbar_angularjs1.png

但我需要第三页中的这张 map 。

我应该在 Controller 上放置什么？

var App = angular.module('App', []);

App.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider

    // route for the about page
        .when('/third', {
            templateUrl: 'pages/third.html',
            controller: 'thirdController'
        });

App.controller('thirdController', function ($scope) {
        angular.extend($scope, {
            defaults: {
                scrollWheelZoom: false
            }
        });
});

在我刚刚设置的html上<leafset></leafset>

但它错了。

谢谢。

Answer 1

确保您已正确包含该指令。

第一:

以正确的顺序包含所有必要的脚本:

<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="/js/angular-leaflet-directive.min.js"></script>

第二:

也包括 CSS:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">

第三:

在您的应用依赖项中包含该指令:

var app = angular.module("demoapp", ['leaflet-directive']);

第三部分可能是您所缺少的，因为他们的网站上没有具体记录它。请参阅其简单示例的代码:

angular-leaflet-directive - simple-example