我有一个小指令可以在我的 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
所有的初始化过程都成功了,但是当我在网站上使用 map 时,我可以看到各种奇怪的图形错误,如 this .
我在该部分代码中使用了 materialize.css 和这个简单的 css:
google-maps { width: 100%; height: 300px;display: block; }
.map-container { height: 220px;margin-top: 10px; }
我不明白为什么会有那个错误,我也没有在互联网上找到任何关于那个错误的信息。
最佳答案
我通过在我的 css 文件中删除这行代码解决了这个问题:
.map-container img { border-radius: 50%; }
这是一个简单的逻辑错误。
关于javascript - 可视化期间谷歌地图错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44007806/