Javascript 如何在angularjs中全屏显示google地图

在我的angular应用程序中，我将ngMap用于谷歌地图，并显示具有特定尺寸的div（宽度：400px，高度：300px）。现在，在某些情况下，我需要全屏显示地图。有没有办法添加双击、按钮或其他方法

<div id="map"></div>
<script>
  var lokacije = [];
        id_maps = [];
        for (key in data.smart_es) {
            lokacije.push({
                lat: data.smart_es[key].lat, 
                lng: data.smart_es[key].lng

            });

        }
        $scope.lokacije = lokacije;

        var mapOptions = {
            zoom: 6,
            center: new google.maps.LatLng(44.7007672, 15.4823411),
            //mapTypeId: google.maps.MapTypeId.TERRAIN
            styles: [{"featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{"color": "#444444"}]}, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, {"featureType": "poi", "elementType": "all", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.business", "elementType": "geometry.fill", "stylers": [{"visibility": "on"}]}, {"featureType": "road", "elementType": "all", "stylers": [{"saturation": -100}, {"lightness": 45}]}, {"featureType": "road.highway", "elementType": "all", "stylers": [{"visibility": "simplified"}]}, {"featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "on"}]}, {"featureType": "transit", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "all", "stylers": [{"color": "#b2d0e3"}, {"visibility": "on"}]}]
        };

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


//marker cluster

        //kraj marker cluster   

        var infoWindow = new google.maps.InfoWindow();
        $scope.markers = [];
        var infoWindow = new google.maps.InfoWindow();


        var getSmartnchIcon = function (smartnch) {
            if (smartnch.type == 'urban') {
                return 'assets/img/marker_urban.png';
            } else {
                return 'assets/img/marker_standard.png';
            }
        };

        var createMarker = function (info) {
            selectednches = info;
           var nchTypeIconUrl = getSmartnchIcon(info);
                if(info.lat !== null && info.lng !== null){
                    $scope.latitude = info.lat;
                    $scope.longitude = info.lng;

                var marker = new google.maps.Marker({
                    map: $scope.map,
                    position: new google.maps.LatLng($scope.latitude, $scope.longitude),
                    optimized: false,
                    title: info.city,
                    icon: ypeIconUrl,
                    id: info.id

                });
                }else{
                    $scope.latitude = 43.5450037;
                        $scope.longitude = 16.4615604;

                    var marker = new google.maps.Marker({
                        map: $scope.map,
                        position: new google.maps.LatLng($scope.latitude, $scope.longitude),
                        optimized: false,
                        title: info.city,
                        icon: ypeIconUrl,
                        id: info.id

                    }); 
                }
           marker.content =  '<div class="info-box-wrap">'
                                    +
                                    '<img src="" ng-click="openLightboxModal($index)"/>'
                                    +
                                    '<div class="info-box-text-wrap">'
                                    +
                                    '<h6 class="address">'
                                    +
                                    info.id + ' - ' + info.type
                                    +
                                    '</h6>'
                                    +
                                    '<p class="price">'
                                    +
                                    info.desc + '<br>'
                                    +
                                    info.last_report + '<br>'
                                    +
                                    '</p>'
                                    +
                                    '</div>'
                                    +
                                    '<div class="action-btns">'
                                    +
                                    '</div>' 
                                    + 

                                    '</div>'
                                    +
                                    '</div>' + marker.content;
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent('<div class="iw-title" style="color: #000;">' + '</div>' + marker.content);
                infoWindow.open($scope.map, marker);
            });
            $scope.markers.push(marker);
        };

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

        $scope.openInfoWindow = function (e, selectedMarker) {
            e.preventDefault();
            google.maps.event.trigger(selectedMarker, 'click');
        };
//marker clusterer
        var options = {
            imagePath: 'assets/img/i',
            gridSize: 50, 
            maxZoom: 10
        };
        var markerCluster = new MarkerClusterer($scope.map, $scope.markers, options);


        $scope.clearMarkers = function () {
            for (var i = 0; i < $scope.markers.length; i++) {
                $scope.markers[i].setMap(null);
            }
            $scope.markers.length = 0;
        };
</script>

var lokacije=[]；
id_映射=[]；
用于（输入数据。智能）{
洛卡奇耶({
lat:data.smart_es[key].lat，
lng:data.smart_es[key].lng
});
}
$scope.lokacije=lokacije；
变量映射选项={
缩放：6，
中心：新google.maps.LatLng（44.7007672,15.4823411），
//mapTypeId:google.maps.mapTypeId.TERRAIN
样式：[{“featureType”：“administrative”，“elementType”：“labels.text.fill”，“stylers”：[{“color”：“#444444”}]，{“featureType”：“landscape”，“elementType”：“all”，“stylers”：[{“color”：“#F2F2F2F2F2”}]}，{“featureType”：“poi”，“elementType”：“all”，“stylers”：[{“可见性”：“off”}]，{“featureType”：“poi.business”，“elementType”：“geometry.fill”，“样式器”：[{“可见性”：“on”}]，{“featureType”：“road”，“elementType”：“all”，“样式器”：[{“saturation”：-100}，{“lightness”：45}]，{“featureType”：“road.highway”，“elementType”：“all”，“样式器”：[{“visibility”：“simplified”}]，{“featureType”：“road.动脉”，“elementType”：“labels.icon”，“样式器”：[{“visibility”：“off”}]，{“featureType”：“{“visibility”：“：“transit”，“elementType”：“all”，“stylers”：[{“visibility”：“on”}]，{“featureType”：“transit”，“elementType”：“labels”，“stylers”：[{“visibility”：“off”}]}，{“featureType”：“water”，“elementType”：“all”，“stylers”：[{“color”：“#b2d0e3”}，{“visibility”：“on”}]
};
$scope.map=new google.maps.map（document.getElementById（'map'），mapOptions）；
//标记簇
//kraj标记簇
var infoWindow=new google.maps.infoWindow（）；
$scope.markers=[]；
var infoWindow=new google.maps.infoWindow（）；
var getSmartnchIcon=函数（smartnch）{
如果（smartnch.type=='urban'）{
返回“assets/img/marker_urban.png”；
}否则{
返回“assets/img/marker_standard.png”；
}
};
var createMarker=函数（信息）{
selectednches=info；
var nchtypeiconul=getSmartnchIcon（信息）；
如果（info.lat！==null&&info.lng！==null）{
$scope.latitude=info.lat；
$scope.longitude=info.lng；
var marker=new google.maps.marker({
map:$scope.map，
位置：新的google.maps.LatLng（$scope.lation，$scope.longitude），
优化：错，
标题：信息城，
图标：ypeIconUrl，
id:info.id
});
}否则{
$scope.latitude=43.5450037；
$scope.longitude=16.4615604；
var marker=new google.maps.marker({
map:$scope.map，
位置：新的google.maps.LatLng（$scope.lation，$scope.longitude），
优化：错，
标题：信息城，
图标：ypeIconUrl，
id:info.id
}); 
}
marker.content=“”
+
''
+
''
+
''
+
info.id+'-'+info.type
+
''
+
“
”
+
info.desc+“
”
+
info.last_报告+“
”
+
“
”
+
''
+
''
+
'' 
+ 
''
+
''+marker.content；
google.maps.event.addListener（标记，'click'，函数（）{
infoWindow.setContent（“”+“”+marker.content）；
infoWindow.open（$scope.map，marker）；
});
$scope.markers.push（marker）；
};
对于（i=0；i

您可以使用全屏api查看

}

---

}您可以使用全屏api，请参见

}

---

}

谷歌地图提供了全屏显示检查按钮的功能

全屏控件提供以全屏模式打开地图的选项。此控件在移动设备上默认启用，在桌面上默认禁用。注：iOS d

function toggleFullScreen() {
  if (!document.fullscreenElement) {
   document.documentElement.requestFullscreen();
} else {
 if (document.exitFullscreen) {
  document.exitFullscreen(); 
}

var mapOptions = {
     zoom: 6,
     center: new google.maps.LatLng(44.7007672, 15.4823411),
     //mapTypeId: google.maps.MapTypeId.TERRAIN
     styles: [{"featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{"color": "#444444"}]}, {"featureType": "landscape", "elementType": "all", "stylers": [{"color": "#f2f2f2"}]}, {"featureType": "poi", "elementType": "all", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.business", "elementType": "geometry.fill", "stylers": [{"visibility": "on"}]}, {"featureType": "road", "elementType": "all", "stylers": [{"saturation": -100}, {"lightness": 45}]}, {"featureType": "road.highway", "elementType": "all", "stylers": [{"visibility": "simplified"}]}, {"featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "on"}]}, {"featureType": "transit", "elementType": "labels", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "all", "stylers": [{"color": "#b2d0e3"}, {"visibility": "on"}]}],
     fullscreenControl:true
};