我正在尝试构建一个包含Leaflet地图的简单Angular 1.5组件。在Angular 1.5组件中使用传单?
这里是我的组件的JS:
// Extend the leaflet js to support the topo module
L.TopoJSON = L.GeoJSON.extend({
addData: function(jsonData) {
if (jsonData.type === "Topology") {
for (var key in jsonData.objects) {
geojson = topojson.feature(jsonData, jsonData.objects[key]);
L.GeoJSON.prototype.addData.call(this, geojson);
}
} else {
L.GeoJSON.prototype.addData.call(this, jsonData);
}
}
});
angular
.module('synthApp')
.component('map', {
templateUrl: 'app/components/map.template.html',
controller: MapController,
bindings: {
name: '@'
}
});
MapController.$inject = [
'$window',
'$rootScope'
];
function MapController(
$window,
$rootScope
) {
var $ctrl = this;
$ctrl.map = null;
$ctrl.markers = [];
// Set layer style
$ctrl.handleLayer = function(layer) {
layer.setStyle({
fillColor: '#eee',
weight: 1,
opacity: 1,
color: '#aaa',
fillOpacity: 1,
clickable: false
});
};
$ctrl.$onInit = function() {
$ctrl.map = $window.L.map($ctrl.name, {
maxZoom: 10,
minZoom: 1,
scrollWheelZoom: false,
attributionControl: false,
tap: false,
touchZoom: true,
zoomControl: true,
crs: $window.L.CRS.EPSG4326
});
var topoLayer = new $window.L.TopoJSON();
var td;
$.getJSON("../map.json", function(json) {
td = json;
console.log(td);
});
topoLayer.addData(td);
topoLayer.addTo($ctrl.map);
topoLayer.eachLayer($ctrl.handleLayer);
$ctrl.map.setView([0,0], 2);
};
}
这里是app/components/map.template.html
内容:
<div id="$ctrl.name" style="background:#c2dfff;height:500px;width:100%">
我试图使用像这样的组件:
<map name="rt-world-2"></map>
但是,我在地图组件的init
的线路上看到发生了错误Error: Map container not found.
,因此我将其称为$ctrl.map = $window.L.map($ctrl.name, {...})
。
将Angular与Leaflet结合使用会有一些限制吗?任何想法错误信息的含义?
你确定你叫'L.map'之前DOM渲染? –