0

为什么方法“requestFullScreen”不适用于带有谷歌地图 v3 的 div？

浏览器进入全屏模式，但是地图消失了。

我的代码：

util.requestFullScreen(map.getDiv());
4

1 回答 1

0

究竟什么是'util'？您可能有某种包装器/帮助器，并且在此包装器中定位了错误。查看您的文件以找出问题所在。

requestFullScreen 不是 google.maps 方法，在 V2 中也不是在 V3 中。

----- 已编辑 --------

我使用了以下代码，并且在 Chrome 和 Firefox 中运行良好（地图不会消失）。

这可能是你的风格，确保它看起来像这样 #map-container { height: 100%; 宽度：100%；}。

确保在测试此代码时使用您的 GOOGLE MAPS API KEY

----- 编辑 2 -----

我修改了代码，以便将地图放在引导模式上。该代码在 Firefox 和 Chrome 中正常工作，地图不会消失。

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&sensor=false">
    </script>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map-container
        {
            height: 100%;
            width: 100%;
            min-width:500px;
            min-height:300px;
        }
    </style>
</head>
<body>    
    <input type="button" class="btn btn-primary btn-lg" value="Show Map" onclick="OpenModal()">

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;</button>
                    <h4 class="modal-title">
                        Map</h4>
                </div>
                <div class="modal-body">
                    <div id="map-container">
                        Div map
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                    <input type="button" class="btn btn-success" value="FullSize" onclick="FullScreen()">
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script type="text/javascript">
        var map;
        $(document).ready(function () {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map($("#map-container")[0], mapOptions);
        });
        function FullScreen() {
            var element = map.getDiv();  //$("#map-container")[0];
            if (element.requestFullscreen) {
                element.requestFullscreen();
            }
            if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            }
            if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            }
        }
        function OpenModal() {
            var options = { backdrop : false };            

            $('#myModal').on('shown.bs.modal', function () {
                google.maps.event.trigger(map, 'resize');
            });

            $('#myModal').modal(options);
        }
    </script>
</body>
</html>
于 2013-10-25T13:56:46.787 回答