个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
所以，我的问题是 - 我的页面上有一张小 map ，我想在同一页面上通过按一个按钮以全屏方式打开这张 map ，然后以相同的方式将其关闭。我认为这可以通过按下按钮时删除 div 样式来完成，但我没有成功，这可能是一种错误的方法吗？我知道这是一个简单的问题，但我的 google 技能不够好，我只是不知道如何正确地提出这个问题，所以我在这里问。
我的代码只是由 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>
最佳答案
如果只是简单地调整 map div 的大小，那么以下 JavaScript 应该会引导您朝着正确的方向前进:
function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.style.height = 100%;
myMap.style.width = 100%;
}
请注意，百分比仅相对于 map div 的祖先元素。
然后您将您的按钮 onclick 映射到 resizeMap() 函数，您就设置好了!
如果你想要一个 jQuery 方法，上面的代码可能是这样的:
function resizeMap() {
$("#map-canvas").css({height: 100%, width: 100%});
}
要将 map 恢复到原来的宽度和高度，您可以先检查宽度和高度是否设置为 100%，然后调整大小，但更优雅的解决方案是使用类而不是内联样式，这可能类似于以下内容:
function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.classList.toggle("fullscreen");
}
然后在你的CSS中你可以:
.fullscreen {
width: 100%;
height: 100%;
}
单击按钮只会在打开和关闭类(class)之间切换。
关于javascript - 如何使用 Google Maps Api v3 在同一页面上全屏打开谷歌地图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20318182/
24
4
0
我正在尝试从一个 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 m
我是 Haskell 的新手，我认为函数 map map和 map.map在 Haskell 中是一样的。 我的终端给了我两种不同的类型， (map.map) :: (a -> b) -> [[a]
我的目标是创建一个 map 的 map ，这样我就可以通过它的键检索外部 map 的信息，然后通过它们的键访问它的“内部” map 。 但是，当我得到每个内部映射时，我最初创建的映射变成了一个对象，我
如何使用 Java8 编写以下代码？ for (Entry> entry : data.entrySet()) { Map value = entry.getValue(); if (valu
我有覆盖整个南非的图片。它们为Tiff格式，并已将坐标嵌入其中。我正在尝试拍摄这些图像（大约20张图像），并将它们用作我的iPhone应用程序中的地图叠加层。我的问题在于（准确地）将地图切成图块。 我
所以我有 2 std::map s >一个是“旧的”，一个是“新的”，我想知道哪些文件被删除了，这样就能够遍历差异并对 shared_ptr 做一些事情。这样的事情可能吗？如何做到？ 最佳答案 虽然
是否可以将当前查看的 google.maps.Map 转换为静态图像链接，以便我可以获取图像并将其嵌入到 PDF 中？ 我在 map 上添加了一些带有自定义图标的标记，所以我不确定这是否真的可行。 如
你能帮我吗 Java Streams ？ 从标题可以看出我需要合并List>>进入Map> . 列表表示为List>>看起来像: [ { "USER_1":{
对于 idAndTags 的第二个条目，内部映射被打乱，但第一个条目则不然 第一次接近! for (Map.Entry> entryOne : idAndTags.entrySet()) {
我将从我的代码开始，因为它应该更容易理解我想要做什么: @function get-color($color, $lightness) { @return map-get(map-get($col
我过去曾在许多网站上使用过 Google map ，但遇到了以前从未遇到过的问题。 map 窗口正在显示，但它只显示左上角的 map 片段，以及之后的任何内容(即使我在周围导航时)，右侧也不会加载任何
众所周知，这些 map ，无论是常规街道 map 还是卫星 map ，在中国的特定地区都无法正确排列。那么哪个 map 排列正确，是卫星 map 还是默认街道 map ？一些网站表明卫星 map 是正
在拖尾事件之后，我面临着获取此处 map 中的 map 边界的问题。我需要新的经纬度来在新更改的视口(viewport)中获取一些项目/点。我只是想在拖动结束时获得谷歌地图map.getBounds(
我想做的是通过 ajax API 显示以英国邮政编码为中心的小型 bing 生成 map 。我相信这是可能的；我在 Bing map 文档中找不到如何将英国邮政编码转换为可以插入 map Ajax 控
我有一个 List我想转换成的 e Map>其中外部字符串应为“Name”，内部字符串应为“Domain”。 Name Id Domain e(0) - Emp1, 1, Insuran
我的第 2 部分:https://stackoverflow.com/questions/21780627/c-map-of-maps-typedef-doubts-queries 然后我继续创建 I
是否可以在 1 行中使用 Java8 编写以下所有 null 和空字符串检查？ Map> data = new HashMap<>(holdings.rowMap()); Set>> entrySet
我正在审查一个项目的旧代码，并使用 Map 的 Map 的 Map 获得了如下数据结构(3 层 map ): // data structure Map>>> tagTree
这可能是一种不好的做法，但我还没有找到更好的解决方案来解决我的问题。所以我有这张 map // Map>> private Map>> properties; 我想初始化它，这样我就不会得到 Null
我们在 JDK 1.7 中使用 HashMap，我在使用 SonarQube 进行代码审查时遇到了一些问题。 请考虑以下示例: public class SerializationTest imple
我是一名优秀的程序员,十分优秀！