如何在angularjs中全屏显示谷歌地图

Question

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

<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>

Answer 1

有一个你可以使用的全屏 api 见 Fullscreen API

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

} }

Answer 2

Google 地图提供了显示全屏按钮的功能，请查看documentation about controls。

全屏控件提供了以全屏模式打开地图的选项。此控件在移动设备上默认启用，在桌面设备上默认禁用。注意：iOS 不支持全屏功能。因此，全屏控件在 iOS 设备上不可见。

所以在你的代码中你必须这样做：

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