Angularjs 谷歌地图中的标记点会出现白色框

Angularjs 谷歌地图中的标记点会出现白色框,angularjs,google-maps,Angularjs,Google Maps,我是AngularJS的新手,我在我的项目中使用谷歌地图API。当我加载项目时,谷歌地图上的标记位置上只有一些白色框。 这是我的密码: map.html <div id="map"></div> var cities = [ { city : 'Toronto', desc : 'This is the best city in the world!', lat : 43.7000, long

我是AngularJS的新手,我在我的项目中使用谷歌地图API。当我加载项目时,谷歌地图上的标记位置上只有一些白色框。 这是我的密码:

map.html

  <div id="map"></div>
var cities = [
    {
        city : 'Toronto',
        desc : 'This is the best city in the world!',
        lat : 43.7000,
        long : -79.4000
    },
    {
        city : 'New York',
        desc : 'This city is aiiiiite!',
        lat : 40.6700,
        long : -73.9400
    },
    {
        city : 'Chicago',
        desc : 'This is the second best city in the world!',
        lat : 41.8819,
        long : -87.6278
    },
    {
        city : 'Los Angeles',
        desc : 'This city is live!',
        lat : 34.0500,
        long : -118.2500
    },
    {
        city : 'Las Vegas',
        desc : 'Sin City...\'nuff said!',
        lat : 36.0800,
        long : -115.1522
    }
];


(function() {
    'use strict';
    AppModule.controller("MapCtrl",["$scope",MapCtrl]);

    function MapCtrl($scope) {

        var mapOptions = {
                zoom: 2,
                center: new google.maps.LatLng(40.0000, -98.0000),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }

            $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

            $scope.markers = [];

            var infoWindow = new google.maps.InfoWindow();

            var createMarker = function (info){

                var marker = new google.maps.Marker({
                    map: $scope.map,
                    position: new google.maps.LatLng(info.lat, info.long),
                    title: info.city
                });
                marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

                google.maps.event.addListener(marker, 'click', function(){
                    infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                    infoWindow.open($scope.map, marker);

                });

                $scope.markers.push(marker);

            }  

            for (var i = 0; i < cities.length; i++){
                createMarker(cities[i]);
            }

            $scope.openInfoWindow = function(e, selectedMarker){
                e.preventDefault();
                google.maps.event.trigger(selectedMarker, 'click');
            }

    }
}())


任何人都有过这样的经历并找到了解决方案,请分享。

检查infoWindowContent类的css是否导致了问题!同样,这可能会帮助你,我检查了css类,但仍然是同一个问题。@Sanjanatry创建了一个plunker plz!最后我找到了解决方案,问题出在css上,实际上是我项目的其他部分的css造成了问题。我通过在一个单独的css文件中移动与GoogleMap相关的css来修复它。还有@SanjanaHE感谢您的回复。随时!!所以认为它的CSS问题。检查是类infoWindowContent的CSS造成的问题!同样,这可能会帮助你,我检查了css类,但仍然是同一个问题。@Sanjanatry创建了一个plunker plz!最后我找到了解决方案,问题出在css上,实际上是我项目的其他部分的css造成了问题。我通过在一个单独的css文件中移动与GoogleMap相关的css来修复它。还有@SanjanaHE感谢您的回复。随时!!我想这是CSS的问题。
    #map {
     height:420px;
   }