文章/答案/技术大牛

发布

问ng-view未显示地图
EN

Stack Overflow用户

提问于 2017-05-18 17:49:55

回答 1查看 94关注 0票数 0

我在index.html中显示路由的html时遇到了问题。我刚接触angular，我已经尝试了几种方法来显示地图。最终，我想要与地图交互并将指针放在地图上，但我需要知道如何首先显示它。另外，控制台没有打印任何东西，所以我不知道发生了什么。

RestuarantRouter
--client
----controllers
------home.js
----vendors
------angular-google-maps.min.js
------angular-messages.js
------angular-route.js
------angular.js
----views
------home.html
----app.js
----index.html

index.html

<!doctype html>
<html ng-app="RestaurantRouter">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RestaurantRouter</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css">
  <link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
  <link rel="stylesheet" href="css/styles.css">

</head>
<body>

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <ul class="nav navbar-nav">
      <a href="/" class="navbar-brand"><i class="ion-wineglass"></i> Restaurant Router</a>
      <li><a href="#/">Home</a></li>
    </ul>
  </div>
</div>

<div ng-view></div>
<script src="vendors/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=myKey-8&libraries=places"></script>
<script src="vendors/angular-route.js"></script>
<script src="vendors/angular-messages.js"></script>
<script src="app.js"></script>
<script src="controllers/home.js"></script>

</body>
</html>

home.js

angular.module('RestaurantRouter', [])
  .controller('HomeCtrl', function ($scope) {
    var mapOptions = {
      zoom: 4,
      center: new google.maps.LatLng(40.0000, -98.0000),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    $scope.map = new google.map.Map(document.getElementById('map'), mapOptions);
  });

app.js

angular.module('RestaurantRouter', ['ngRoute', 'ngMessages'])
  .config('$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      })
      .otherwise({ redirectTo: '/'});
    });

home.html

<div class="container">
    <div class="jumbotron">
      <h1>Hello</h1>
      <div id="map">{{name}}</div>
    </div>
  </div>

google-maps

ng-view

angularjs

回答 1

Stack Overflow用户

发布于 2017-05-18 19:44:09

如果使用内联注释，则必须将配置依赖项和函数包含在[]中：

.config(['$routeProvider', function ($routeProvider) {
        console.log('çonfig');
        $routeProvider
            .when('/', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    }])

否则，就像您在控制器上所做的那样：

.config(function ($routeProvider) {
        console.log('çonfig');
        $routeProvider
            .when('/', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    })

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44044365

复制

相似问题

问ng-view未显示地图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ng-view未显示地图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ng-view未显示地图
EN