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

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

问题在于项目 img (border-radius: 100%) 中的错误 CSS 样式是由某人全局设置的。