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

我遇到了模块未加载地图的问题，给出了错误：$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>

但是我仍然收到模块实例化错误。我认为我没有正确加载 OpenLayers 指令？我还尝试从 OpenLayers 的 CDN 加载相同的依赖项，请参阅此 JSFiddle 中的此处。如果很重要，我还在样式表中定义了地图的高度、宽度和缩放属性。

.angular-openlayers-map {
    height: 800px;
    width: 100%;
    float: left;
    z-index: 1;
    position: relative;
}

我没有看到任何对开放层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);
      }
    }
  });
}]);

<!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>

相关内容

最新更新

热门标签：