-1
Ich bin ziemlich neu im Angular-Workflow. Ich versuche, meine Seiten mit Leaflet um eine Karte zu erweitern. Ich würde es gerne durch Komponenten machen. Ich folgte zwei Anweisungen (im Kommentar aufgeführt), um es (vergeblich) geschehen zu lassen.Verwenden von Leaflet in eckigen Komponenten
Sie sehen das Ergebnis hier: http://oye-api.herokuapp.com/test.html
Aber ich habe nichts. Keine Karte, aber auch kein Fehler. Ich weiß nicht, was ich falsch gemacht habe. Kannst du helfen?
Danke!
Das ist, was ich habe:
seite.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'
]);
Die Anweisungen, die ich versuchte folgen: - http://blog.thehumangeo.com/angular -component-syntax.html - https://coderwall.com/p/cfj6da/how-to-use-the-angular-leaflet-directive –