1

我正在尝试使用 angularjs 在我的应用程序上加载 esri 引导映射。我没有地图的第一个视图显示得很好。当我单击链接以显示第二个视图（esri 地图）时，它什么也没有显示。控制台上没有错误，当我不尝试将其作为新视图插入时，地图可以正常显示。我曾尝试查看此站点上的其他答案，但似乎无法使任何这些工作。如果有人愿意看一下，这是我的代码。

    var app = angular.module('myIso', ['ngRoute']);
        app.config(function ($routeProvider) {
          "use strict";
            $routeProvider
          .when('/', {
            controller:
            'HomeController',
            templateUrl:
            'views/home.html'
          })
          .when('/map', {
            controller:
            'MapController',
            templateUrl:
            'views/map.html'
          })
          .otherwise({
            redirectTo: '/'
          });
        });

    app.controller('MapController', ['$scope', function ($scope) {
        "use strict";
      }]);

这是我的意见/map.html 

 <div class="container">
      <div id="mapDiv"></div>
    </div>

    <!-- Step 3. Add JS to load the responsive map -->
    <script>
        var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
        var dojoConfig = {
            packages: [{
                name: "application",
                location: package_path + '/js'
            }, {
                name: "bootstrap",
                location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
            }]
        };
    </script>
    <script src="//js.arcgis.com/3.13compact"></script>
    <script>
        require(["esri/map", "application/bootstrapmap",  "esri/layers/FeatureLayer", 
        "esri/tasks/query", "esri/geometry/Circle",
        "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
        "esri/config", "esri/Color", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, BootstrapMap, FeatureLayer,
        Query, Circle,
        Graphic, InfoTemplate, SimpleMarkerSymbol,
        SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
        esriConfig, Color, dom
      ){
                      // Get a reference to the ArcGIS Map class
            var map = BootstrapMap.create("mapDiv",{
              basemap:"streets",
              center:[-111.962460, 40.665577],
              zoom:11 
            });
        var circleSymb = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_NULL,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
            new Color([105, 105, 105]),
            2
          ), new Color([255, 255, 0, 0.25])
        );
        var circle;

        //when the map is clicked create a buffer around the click point of the specified distance.
        map.on("click", function(evt){
          circle = new Circle({
            center: evt.mapPoint,
            geodesic: true,
            radius: 10,
            radiusUnit: "esriMiles"
          });
          map.graphics.clear();
          map.infoWindow.hide();
          var graphic = new Graphic(circle, circleSymb);
          map.graphics.add(graphic);
        });
        });
    </script>

还有我的 index.html 

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <!--Angular Stuff -->
          <script src="js/angular/library.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
           <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>

        <!-- Bootstrap -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">

        <!-- Step 1. Add CSS for the mapping components -->
        <link rel="stylesheet" type="text/css" href="//js.arcgis.com/3.13/esri/css/esri.css">   
        <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> 


        <style type="text/css">
          #mapDiv {
            min-height: 100px; 
            max-height: 1000px; 
          }
        </style>

        <!-- HTML5 IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.js"></script>
          <script src="../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body ng-app="myIso">

        <div class="header">
            <div ng-view></div>
          </div>


              <!-- Modules -->          
        <script src="js/app.js"></script>           

        <!-- Controllers -->            
        <script src="js/controllers/HomeController.js"></script>            
        <script src="js/controllers/MapController.js"></script>         



      </body>
    </html>
4

0 回答 0