javascript 如何使用 Google Maps Api v3 在同一页面上全屏打开 Google 地图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20318182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How open a google map in full screen on the same page using Google Maps Api v3?
提问by user2596615
So, my question is - I have a small map on my page and I want open this map in a full screen on the same page by pressing a button and close it in the same way. I think it can be done by removing div styles when you press the button but I didn't succeed, may be this is a wrong way? I understand that is a simple question but my google skills aren't well developed and I just don't know how to ask this question properly, so I'm asking here.
所以，我的问题是 - 我的页面上有一张小地图，我想通过按下按钮在同一页面上全屏打开这张地图，然后以相同的方式关闭它。我认为可以通过在按下按钮时删除 div 样式来完成，但我没有成功，可能这是一种错误的方式？我知道这是一个简单的问题，但我的谷歌技能没有得到很好的发展，我只是不知道如何正确地提出这个问题，所以我在这里问。
My code is simply generated by GoogleMapsTileCutterplus I've added some code from herefor limit panning. This is all code that I have done.
我的代码只是由GoogleMapsTileCutter生成的，而且我从这里添加了一些代码来限制平移。这是我完成的所有代码。
<!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>
采纳答案by LarryFisherman
If it's a matter of simply resizing your map div, then the following JavaScript should lead you in the right direction:
如果只是简单地调整地图 div 的大小，那么以下 JavaScript 应该会引导您走向正确的方向：
function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.style.height = 100%;
myMap.style.width = 100%;
}
Note that the percentages are only relative to ancestor elements of your map div.
请注意，百分比仅与地图 div 的祖先元素相关。
Then you'd map your buttons onclick to the resizeMap() function and you're set!
然后你将你的按钮 onclick 映射到 resizeMap() 函数，你就设置好了！
If you wanted a jQuery approach, this is what the above code could look like:
如果你想要一个 jQuery 方法，上面的代码可能是这样的：
function resizeMap() {
$("#map-canvas").css({height: 100%, width: 100%});
}
To revert the map back to its original width and height, you could first check if the width and height are set to 100%, then resize, but a more elegant solution would be to use a class instead of inline styles, which could resemble the following:
要将地图恢复为其原始宽度和高度，您可以首先检查宽度和高度是否设置为 100%，然后调整大小，但更优雅的解决方案是使用类而不是内联样式，这可能类似于下列的：
function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.classList.toggle("fullscreen");
}
Then in your css you can have:
然后在您的 css 中，您可以拥有：
.fullscreen {
width: 100%;
height: 100%;
}
Clicking the button would just toggle between turning the class on and off.
单击按钮只会在打开和关闭类之间切换。
回答by Olav Ask Dybdahl
Like this, the answers above do not work. var mapOptions = {center: myCenter, zoom: 9,fullscreenControl: true};
像这样，上面的答案不起作用。var mapOptions = {center: myCenter, zoom: 9,fullscreenControl: true};
