Question

我是angularjs的新手，并从github尝试了一些例子。还有一些基本原则我还不太清楚。

我试过这个时会显示google的地图：

https://github.com/wbyoko/angularjs-google-maps-components/blob/master/01-Hello-Maps.html

但是，当我尝试SPA实施时。移至partials页面，添加routesProvider以加载部分，谷歌地图不再显示。

从指令中，我可以看到地图对象是从googleapi返回的，但它不会在局部视图上显示地图对象。

map.html

<body ng-app="mapComponentsApp">

<div ng-view></div>


<script type="text/javascript">
    var mapApp = angular.module('mapComponentsApp', ['ngRoute']);

    mapApp.config(['$routeProvider', '$locationProvider', '$provide', function($routeProvider, $locationProvider) {

    $routeProvider.when('/', {
    templateUrl: '/angular/part-map.html',
    controller: 'MapCtrl'
  });
  }]);

mapApp.controller("MapCtrl", function ($scope, $http) {
 console.log('mapctrl');
});

mapApp.directive('helloMaps', function () {
        var map, mapOptions;

        function initialize(id){
         mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(43.074688, -89.384294)
          };

        map = new google.maps.Map(document.getElementById(id), mapOptions);

        };

      return{
                restrict: 'A',
                link: function(scope, element, attrs) {
          mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(43.074688, -89.384294)
          };

        map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
        console.dir(map);
                  }

      }
    });  
  </script>
</body>

部分map.html

<h1>Hello Maps</h1>
<div hello-maps id="map-canvas"></div>

==================================

Answer 1

您是否为height设置了map-canvas？我通过在css中添加以下内容来解决这个问题：

#map-canvas {
    height: 500px;
}

AngularJs：googlemap没有在局部视图上显示？

1 个答案: