我遇到的问题是我的模块没有加载我的地图,给出一个错误:$ injector:modulerr 模块错误。我很确定我用...正确地实例化了我的模块。
var app = angular.module("MapApp", ["openlayers-directive"]);
app.controller('MapController', ['$scope', function MapController($scope){
angular.extend($scope, {
center:{
lat: 40.060620,
lon: -77.523182,
zoom: 17
}
});
}]);
然后在我的HTML中使用它......
<!DOCTYPE html>
<html lang="en" ng-app="MapApp">
<head>
<meta charset="UTF-8">
<title>ShipList</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/ol.js"></script>
<script src="../lib/angular.min.js"></script>
<link rel="stylesheet" href="../css/ol.css"/>
<script src="../js/Map.js"></script>
...
<!--Later in my body tag, I'm declaring my Controller-->
<div class="overlay" ng-controller="MapController">
<openlayers id="mapid"></openlayers>
但是我仍然得到module instantiation error.我认为我没有正确加载OpenLayers指令?我也尝试从CDN为OpenLayers加载相同的依赖项,请参阅here in this JSFiddle。如果重要的话,我还在样式表中定义了地图的高度,宽度和缩放属性。
.angular-openlayers-map {
height: 800px;
width: 100%;
float: left;
z-index: 1;
position: relative;
}
答案 0 :(得分:0)
我没有看到任何有关开放层javascript文件的参考资料。请查看以下演示。
演示
var app = angular.module("demoapp", ["openlayers-directive"]);
app.controller("DemoController", [ '$scope', function($scope) {
$scope.showDetails = function(id) {
alert('lat: '+ id.lat+', '+'lon: '+id.lon);
};
angular.extend($scope, {
center: {
lat: 42.9515,
lon: -8.6619,
zoom: 9
},
finisterre: {
lat: 42.907800500000000000,
lon: -9.265031499999964000,
label: {
show: false,
},
onClick: function (event, properties) {
alert('lat: '+ properties.lat+', '+'lon: '+properties.lon);
}
},
santiago: {
lat: 42.880596200000010000,
lon: -8.544641200000001000,
label: {
show: true
}
},
santacomba: {
lat: 43.0357404,
lon: -8.8213786,
label: {
message: "Santa Comba",
show: false,
},
onClick: function (event, properties) {
alert('lat: '+ properties.lat+', '+'lon: '+properties.lon);
}
}
});
}]);
&#13;
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular-sanitize.min.js"></script>
<script src="https://tombatossals.github.io/angular-openlayers-directive/dist/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.min.css" />
<link rel="stylesheet" href="http://tombatossals.github.io/angular-openlayers-directive/dist/angular-openlayers-directive.css" />
<!-- Demo Styles -->
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="DemoController">
<h1>Open Layers Demo</h1>
<p>Click on the <em>map marker</em> for <strong>Fisterra</strong> or <strong>Santa Comba</strong>to see the latitude and longitude.</p>
<p>Click on the map marker <em>popover</em> for <strong>Santiago de Compostela</strong> to see the latitude and longitude.</p>
<openlayers ol-center="center" height="400px" width="100%">
<ol-marker ol-marker-properties="santiago"><p ng-click="showDetails(santiago)">Santiago de Compostela</p></ol-marker>
<ol-marker ol-marker-properties="finisterre" class="hidden"><span></span></ol-marker>
<ol-marker ol-marker-properties="santacomba"></ol-marker>
</openlayers>
</body>
</html>
&#13;