Javascript 如何使用谷歌地图Api v3在同一页面上全屏打开谷歌地图？
所以，我的问题是-我的页面上有一个小地图，我想在同一页面上全屏打开这个地图，按一个按钮，然后以同样的方式关闭它。我想当你按下按钮的时候可以删除div样式，但是我没有成功，这可能是一个错误的方法吗？我知道这是一个简单的问题，但我的谷歌技能并没有得到很好的发展，我只是不知道如何正确地问这个问题，所以我在这里问 我的代码只是由plus生成的，我从中添加了一些用于限制平移的代码。这就是我所做的所有代码Javascript 如何使用谷歌地图Api v3在同一页面上全屏打开谷歌地图？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,所以，我的问题是-我的页面上有一个小地图，我想在同一页面上全屏打开这个地图，按一个按钮，然后以同样的方式关闭它。我想当你按下按钮的时候可以删除div样式，但是我没有成功，这可能是一个错误的方法吗？我知道这是一个简单的问题，但我的谷歌技能并没有得到很好的发展，我只是不知道如何正确地问这个问题，所以我在这里问 我的代码只是由plus生成的，我从中添加了一些用于限制平移的代码。这就是我所做的所有代码 <!DOCTYPE html> <html lang="en"> <
<!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>
PS_Bramus.GoogleMapStilecuter
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
宽度：100%；
身高：100%；
颜色：#CCC；
背景：#efef；
}
跨度荷载{
显示：块；
文本对齐：居中；
字体：300斜体72px/400px“HelveticaNeue灯”、“Helvetica Neue灯”、“Helvetica Neue灯”，无衬线；
}
正在加载瓷砖。。。
/*
*=PS_Bramus.GoogleMapsTileCutter配置
* ----------------
*/
var repeatOnXAxis=false；//我们需要在X轴上重复图像吗？您很可能希望将其设置为false
/*
*帮助函数，用于规范坐标，以便平铺可以像标准谷歌地图平铺一样在X轴（水平）上重复。
* ----------------
*/
函数getNormalizedCoord（coord，zoom）{
如果（！repeatOnXAxis）返回坐标；
变量y=坐标y；
var x=坐标x；
//一个方向范围内的平铺范围取决于缩放级别
//0=1瓦、1=2瓦、2=4瓦、3=8瓦等
var tileRange=1如果只是简单地调整map div的大小，那么下面的JavaScript将引导您朝着正确的方向前进：
function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.style.height = 100%;
myMap.style.width = 100%;
}
请注意，百分比仅与map div的祖先元素相关
然后单击按钮，将其映射到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%;
}
单击按钮将在打开和关闭课程之间切换。像这样，上面的答案不起作用
var mapOptions = {
center: myCenter,
zoom: 9,
fullscreenControl: true
};
给出一些到目前为止您已经完成的代码？添加了一些我已经完成的代码。好吧，但是按钮应该是什么样子，因为全屏不工作，我想可能是因为我安装了错误的地图画布样式？在您刚才提供的代码中，我们可以看到您的地图div没有“地图画布”的ID，而只是“地图”.最后一个问题是-如何提供以隐藏形式加载地图？我之所以这样问，是因为您的示例提供了以全屏模式加载地图，并且只有在全屏模式加载后，我才能使用按钮切换地图视图，还因为我尝试使用css样式提供以隐藏形式加载地图，但之后的地图看起来像我不知道为什么谷歌瓷砖的一部分没有加载，你能解释一下原因吗？