Question

使用angular-google-maps 1.0.18 地图加载完全正常，问题增加标记添加。包含标记的正方形在地图中变为灰色。我也试过使用其他问题中提出的解决方案。但它没有任何区别。有关如何解决此问题的任何线索。

enter image description here

Grey boxes appear in parts of embedded Google Map in modal box

参考代码：

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 : 28.65596033103927,
            long : 77.2226215342037
        }
    ];

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

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

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

        google.maps.event.trigger($scope.map, 'resize');
        //$scope.map.setCenter(new google.maps.LatLng(22.3605336, -72.6362989));

        $scope.markers.push(marker);

        //google.maps.event.trigger($scope.map, 'resize');

    }  

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

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

HTML：

<div>
    <div id="map"></div>
    <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
         <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
    </div>
</div>

Answer 1

我们遇到了这个问题，看起来与OP的截图完全相同。

我们遇到的问题是我们使用的是一个名为dropzone的javascript库，它要求我们将CSS样式应用于＆＃39; canvas＆＃39;如下：

 canvas {
    -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
    -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
    background-color: #f3f3f3;
    border: 1px solid #c3c3c3;
    box-shadow: 3px 3px 3px 0 #e3e3e3;
    height: 100px;
    margin: 6px 0 0 6px;
}

这种样式无意中被应用于谷歌地图画布，这导致了“灰色框”。在添加标记时显示在地图上。

删除任何适用于所有＆＃39;画布的样式。元素并使用类/ ID选择器，以便您不会无意中将样式应用于Google地图画布。

地图标记在Angularjs中的Google地图中应用后的灰色平铺

1 个答案: