javascript - Angular-在特定 ID 内显示谷歌地图

Question

我想使用 Angularjs 在 ui-booststrap 模式中的特定容器内显示 Google map 。这是我的代码:

HTML:

<script type="text/ng-template" id="mapModalContent.html">
    <div class="map-container" ng-class="{'open' : openMapContainer}">
        <div class="header-section">
        header
        </div>
        <div class="close-btn"><i class="icon icon-cancel"></i></div>
        <div id="map-test" class="map-test"></div>
        <div id="map-content"></div>
        <div class="footer-section"></div>
    </div>
</script>

Angular :

    var modalInstance = $uibModal.open({
        templateUrl: 'mapModalContent.html',
        scope: $scope,
        windowClass: 'mapModal',
        size: 'lg',
        resolve: {
            data: function () {
                return $scope;
            }
        }
    });
        modalInstance.opened.then(function() {
            console.log('opened');
        });
    }
    $scope.$watch('data', function(value){
        if(typeof value !== 'undefined') {
            searchLatLng = new google.maps.LatLng($scope.data.latitude, $scope.data.longitude);

             googleMap = new google.maps.Map($element.find('.map-content'), {
                 center: {lat: -34.397, lng: 150.644},
                 zoom: 8
             });
            searchMarker = new google.maps.Marker({
                position: searchLatLng,
                map: googleMap,
                draggable: true
            });
            google.maps.event.addListener(searchMarker, 'dragend', function () {
                scope.$apply(function () {
                    $scope.data.latitude = searchMarker.getPosition().lat();
                    $scope.data.longitude = searchMarker.getPosition().lng();
                });
            }.bind(this));

            var myPosition = new google.maps.LatLng($scope.data.latitude, $scope.data.longitude);
            searchMarker.setPosition(myPosition);
        }
    }, true);
}       

在控制台中，我得到

已打开(用于打开模式)

和

实际上， map 尚未加载。有什么建议吗？

Answer 1

如果我理解正确的话，有一个灰色的框。

你能试试这个吗:

modalInstance.opened.then(function() {
    console.log('opened');
     google.maps.event.trigger(googleMap, "resize");
});

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