谷歌地图v3请求全屏

google maps v3 requestFullScreen

本文关键字：请求 v3 谷歌地图      更新时间：2023-09-26

为什么方法"requestFullScreen"在带有谷歌地图v3的div上不起作用？

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

我的代码：

util.requestFullScreen(map.getDiv());

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

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

-----编辑--------

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

这可能是你的风格，确保它看起来像这样 #map 容器 { 高度： 100%; 宽度：100%; }.

确保在测试此代码时使用您的谷歌地图API密钥

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

我修改了代码，以便将地图放在引导模式上。代码在火狐和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>
相关文章：