Question

所以，我的问题是 - 我的页面上有一张小地图，我希望通过按下按钮以同样的方式关闭它，在同一页面上以全屏打开此地图。我认为可以通过在按下按钮时删除div样式来完成，但我没有成功，可能这是一种错误的方法？我知道这是一个简单的问题，但我的谷歌技能还没有很好地发展，我只是不知道如何正确地提出这个问题，所以我在这里问。

我的代码只是由GoogleMapsTileCutter生成的，而且我添加了here的一些代码来进行限制平移。这是我所做的所有代码。

<!DOCTYPE html>
<html lang="en">
   <head>
    <title>PS_Bramus.GoogleMapsTileCutter</title>
    <meta charset="utf-8" />
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width:100%;
            height:100%;
            color: #CCC;
            background: #EFEFEF;
        }
        span.loading {
            display: block;
            text-align: center;
            font: 300 italic 72px/400px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
        }
    </style>
</head>
<body>
    <div id="map"><span class="loading">loading tiles...</span></div>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>


        /*
         * = PS_Bramus.GoogleMapsTileCutter Config
         * ----------------
         */

            var repeatOnXAxis = false; // Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false



        /*
         * Helper function which normalizes the coords so that tiles can repeat across the X-axis (horizontally) like the standard Google map tiles.
         * ----------------
         */

            function getNormalizedCoord(coord, zoom) {
                if (!repeatOnXAxis) return coord;

                var y = coord.y;
                var x = coord.x;

                // tile range in one direction range is dependent on zoom level
                // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
                var tileRange = 1 << zoom;

                // don't repeat across Y-axis (vertically)
                if (y < 0 || y >= tileRange) {
                    return null;
                }

                // repeat across X-axis
                if (x < 0 || x >= tileRange) {
                    x = (x % tileRange + tileRange) % tileRange;
                }

                return {
                    x: x,
                    y: y
                };

            }


        /*
         * Main Core
         * ----------------
         */

            window.onload = function() {

                // Define our custom map type
                var customMapType = new google.maps.ImageMapType({
                    getTileUrl: function(coord, zoom) {
                        var normalizedCoord = getNormalizedCoord(coord, zoom);
                        if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
                            return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
                        } else {
                            return 'empty.jpg';
                        }
                    },
                    tileSize: new google.maps.Size(256, 256),
                    maxZoom: 5,
                    name: 'PS_Bramus.GoogleMapsTileCutter'
                });

                // Basic options for our map
                var myOptions = {
                    center: new google.maps.LatLng(0, 0),
                    zoom: 3,
                    minZoom: 3,
                    disableDefaultUI: true,
                    streetViewControl: false,
                    mapTypeControl: false,
                    mapTypeControlOptions: {
                        mapTypeIds: ["custom"]
                    }
                };

                // Init the map and hook our custom map type to it
                var map = new google.maps.Map(document.getElementById('map'), myOptions);
                map.mapTypes.set('custom', customMapType);
                map.setMapTypeId('custom');

                // bounds of the desired area
                var allowedBounds = new google.maps.LatLngBounds(
                     new google.maps.LatLng(-47,-95.61), 
                     new google.maps.LatLng(47,95.61)
                );
                var lastValidCenter = map.getCenter();

                google.maps.event.addListener(map, 'center_changed', function() {
                    if (allowedBounds.contains(map.getCenter())) {
                        // still within valid bounds, so save the last valid position
                        lastValidCenter = map.getCenter();
                        return; 
                    }

                    // not valid anymore => return to last valid position
                    map.panTo(lastValidCenter);
                });

            }
    </script>

</body>

Answer 1

如果只是调整地图div的大小，那么以下JavaScript应该引导您朝着正确的方向前进：

function resizeMap() {
    var myMap = document.getElementById('map-canvas');
    myMap.style.height = 100%;
    myMap.style.width = 100%;
}

请注意，百分比仅相对于地图div的祖先元素。

然后你将按钮onclick映射到resizeMap（）函数并设置好！

如果你想要一个jQuery方法，这就是上面代码的样子：

function resizeMap() {
    $("#map-canvas").css({height: 100%, width: 100%});
}

要将地图恢复为原始宽度和高度，您可以首先检查宽度和高度是否设置为100％，然后调整大小，但更优雅的解决方案是使用类而不是内联样式，可能类似于以下内容：

function resizeMap() {
    var myMap = document.getElementById('map-canvas');
    myMap.classList.toggle("fullscreen");
}

然后在你的CSS中你可以：

.fullscreen {
    width: 100%;
    height: 100%;
}

单击该按钮只会在打开和关闭课程之间切换。

Answer 2

像这样，上面的答案不起作用。 var mapOptions = {center：myCenter，zoom：9，fullscreenControl：true};

如何使用Google Maps Api v3在同一页面上全屏打开谷歌地图？

2 个答案: