Googleマップのレンダリング奇妙円は私がangularjs-グーグルマップディレクティブを使用しているマップ

Question

をカバーし、私のコードは次のようになります。

(function() { 
    define(['angular', 'app'], function (angular, app) { 
    app.directive('customMap', function() { 
     var customMapTemplate = 
     "<div class= \"vertical-collapse\" ng-class=\"{ 'opened' : showMap() }\">" + 
     "  <div map-lazy-load=\"https://maps.google.com/maps/api/js\"" + 
     "    map-lazy-load-params=\"{{googleMapsUrl}}\" >" + 
     "   <ng-map center=\"64,-21\" zoom=\"10\"></ng-map>" + 
     "  </div >" + 
     "</div> " + 
     "&nbsp;"; 
     // console.log(customMapTemplate); 
     return { 
     restrict: 'E', 
     template: customMapTemplate, 
     controller: function ($scope) { 
      console.log($scope.showMap()); 
      $scope.googleMapsUrl = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBUKGtliE38keJLwWjbOrM2uPFiSSDRKZA'; 
     }, 
     scope: { 
      'showMap': '&showMap' 
     } 
     }; 
    }); 
    }); 
}).call(this); 

、このマップは、正しくレンダリングされません。私はそれにいくつかの奇妙なサークルを持っていて、なぜ分からないのですか？

任意のアイデアはなぜですか？

Answer 1

プロジェクトで間違ったCSSスタイルが問題でした。img（border-radius：100％）が誰かによってグローバルに設定されました。