Google在可视化过程中发现错误 [英] Google maps error during visualization

问题描述

  app.directive（'googleMaps'，function， （$ root，$ q，$ window）{
 var mapLoader = $ q.defer（）; 
函数loadGoogleApi（key）{
 var script = document.createElement（'script'） ; 
 script.type ='text / javascript'; 
 script.src =https://maps.googleapis.com/maps/api/js?key=+ key +& callback = 
 $（'body'）。append（script）; 
 return mapLoader.promise; 
}; 
 $ window.initMap = function（）{
 mapLoader.resolve（）; 
}; 
 return {
 restrinct：'E'，
 link：function（$ scope，element，attrs）{
 （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中我有以下代码：

  //其他东西
 div.col.s12.m12.map-container 
 h6 =我是miei spot
 google -maps 
  

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

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

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

我不明白为什么会有这个错误，而且我在互联网上没有找到任何东西

解决方案

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

  .map-container img {border-radius：50％; } 
  

这是一个逻辑错误。

I have a small directive that handle google map in my Angular application:

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');
           });

       }
   };
});

Then in my index.jade i have the following code:

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

All the initialization procedure succeeded but when I use the map on the website, I can see various strange graphic bug like this.

I am using materialize.css and this simple css in that part of code:

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

I don't understand why there is that bug, and i didn't found anything on internet about that bug.

解决方案

I solved the problem by removing in my css file this line of code:

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

It was a simple error of logic.

这篇关于Google在可视化过程中发现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！