可视化过程中的谷歌地图错误答案

【问题标题】：Google maps error during visualization可视化过程中的谷歌地图错误
【发布时间】：2017-05-16 17:19:32
【问题描述】：

我有一个小指令在我的 Angular 应用程序中处理谷歌地图：

app.directive('googleMaps', function($rootScope, $q, $window){
   var mapLoader = $q.defer();
   function loadGoogleApi(key){
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src= "https://maps.googleapis.com/maps/api/js?key=" + key + "&callback=initMap";
       $('body').append(script);
       return mapLoader.promise;
   };
   $window.initMap = function(){
       mapLoader.resolve();
   };
   return {
       restrinct: 'E',
       link: function($scope, element, attrs){
           loadGoogleApi('AIzaSyBtuQ-wYoHqnAxpXh8hTAfEH8BQCiBSCWw').then(function(){
               $scope.map = new google.maps.Map(element[0], {
                   zoom: 4,
                   center: { lat: 20, lng: 40 }
               });
               google.maps.event.trigger($scope.map,'resize');
           });

       }
   };
});

然后在我的 index.jade 我有以下代码：

//Other stuff
div.col.s12.m12.map-container
    h6="I miei spot"
    google-maps

所有初始化过程都成功了，但是当我在网站上使用地图时，我可以看到各种奇怪的图形错误，如this。

我在这部分代码中使用了 materialize.css 和这个简单的 css：

google-maps { width: 100%; height: 300px;display: block; }
.map-container { height: 220px;margin-top: 10px; }

我不明白为什么会有这个错误，而且我没有在互联网上找到任何关于这个错误的信息。

【问题讨论】：

标签： javascript css angularjs google-maps pug

【解决方案1】：

我通过在我的 css 文件中删除这行代码解决了这个问题：

.map-container img { border-radius: 50%; }

这是一个简单的逻辑错误。

【讨论】：