谷歌地图渲染 - 奇怪的圆圈覆盖地图

Question

我正在使用angularjs-google-maps指令，我的代码如下所示：

(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％）是由某人全局设置的。