CSS 缩放控制和街景没有显示在我的 Google 地图上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8511436/
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
Zoom control and streetview not showing on my Google map?
提问by Phill
I'm inserting a very basic Google map into my page and the zoom control and streetmap icon are not visible, however if I place my mouse over where they should be I can zoom the map and enter streetview. So the controls are there just not visible.
我在我的页面中插入了一个非常基本的谷歌地图，并且缩放控件和街道地图图标不可见，但是如果我将鼠标放在它们应该放置的位置上，我可以缩放地图并输入街景。所以控件在那里是不可见的。
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false®ion=IT">
</script>
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Any ideas what the problem could be?
任何想法可能是什么问题？
回答by skarE
That is definitely a CSS issue that you have with your code. Look for CSS that is applying to all images like:
这绝对是您的代码存在的 CSS 问题。寻找适用于所有图像的 CSS，例如：
img {
max-width: 100%;
}
回答by Pete
I had this problem, the fix was to include this CSS ...
我遇到了这个问题，解决方法是包含这个 CSS ...
.gmnoprint img { max-width: none; }
The CSS selector .gmnoprint imggets to all images [img] on the Google Map [gm] controls that are non printing [noprint]. In my case max-widthhad been set globally to 100%. Unsetting this fixed the issue.
CSS 选择器.gmnoprint img获取 Google Map [gm] 控件上非打印 [noprint] 的所有图像 [img]。在我的情况下，max-width全局设置为 100%。取消设置解决了这个问题。
回答by Mo.
Best solution to reach only for google map
仅适用于谷歌地图的最佳解决方案
.gmnoprint img {
max-width: none;
}
回答by prusswan
I ran into a variant, with the offending css looking like:
我遇到了一个变体，有问题的 css 看起来像：
img {
max-width: 100%;
max-height: 100%;
}So, an additional line is needed:
因此，需要额外的一行：
#map_div img {
max-width: none !important;
max-height: none !important;
}
回答by jkindwall
I had a very similar issue and it turned out in my case NOT to be a CSS issue. In my case, the Content-Security-Policy header on our site was blocking certain images from being rendered. In this case it was blocking the street view images (loaded from a *.ggpht.com uri) and the button icons which use inline svg data specified using the data: scheme. To fix this, I added the following to the Content-Security-Policy header:
我有一个非常相似的问题，结果证明在我的情况下不是 CSS 问题。就我而言，我们网站上的 Content-Security-Policy 标头阻止了某些图像的呈现。在这种情况下，它阻止了街景图像（从 *.ggpht.com uri 加载）和使用使用 data: 方案指定的内联 svg 数据的按钮图标。为了解决这个问题，我在 Content-Security-Policy 标头中添加了以下内容：
img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com
回答by dsomnus
Note that on the moment it's not even possible to show the full size zoom slider on touch devices (ipad etc). Here's the documentation:
请注意，目前甚至无法在触摸设备（ipad 等）上显示全尺寸缩放滑块。这是文档：
http://code.google.com/apis/maps/documentation/javascript/controls.html
http://code.google.com/apis/maps/documentation/javascript/controls.html
google.maps.ZoomControlStyle.SMALLdisplays a mini-zoom control, consisting of only + and - buttons. This style is appropriate for small maps. On touch devices, this control displays as + and - buttons that are responsive to touch events.
google.maps.ZoomControlStyle.SMALL显示一个迷你缩放控件，仅包含 + 和 - 按钮。这种风格适合小地图。在触摸设备上，此控件显示为响应触摸事件的 + 和 - 按钮。
google.maps.ZoomControlStyle.LARGEdisplays the standard zoom slider control. On touch devices, this control displays as + and - buttons that are responsive to touch events.
google.maps.ZoomControlStyle.LARGE显示标准缩放滑块控件。在触摸设备上，此控件显示为响应触摸事件的 + 和 - 按钮。
回答by ccuesta
I'm thinking this might be a problem with the browser or the code within the page that you're embedding this map.
我认为这可能是浏览器或您嵌入此地图的页面中的代码的问题。
If I look at this simple hello world code, the maps controls show up fine. I geocoded this map to the same location as your sample, so its not anything to do with the location.
如果我查看这个简单的 hello world 代码，地图控件显示良好。我将此地图地理编码到与您的样本相同的位置，因此与该位置无关。
What happens when you use this sample?
使用此示例时会发生什么？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true®ion=it">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.38686, 8.91927);
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
