AngularJS错误:$ injector:modulerr模块尝试使用OpenLayers指令时出错

时间:2018-04-28 03:25:31

标签: javascript angularjs openlayers

我遇到的问题是我的模块没有加载我的地​​图,给出一个错误:$ 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;
}

1 个答案:

答案 0 :(得分:0)

我没有看到任何有关开放层javascript文件的参考资料。请查看以下演示。

演示

&#13;
&#13;
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;
&#13;
&#13;