缩放控制和街景没有显示在我的 Google 地图上？
Posted
技术标签:
【中文标题】缩放控制和街景没有显示在我的 Google 地图上？【英文标题】：Zoom control and streetview not showing on my Google map? 【发布时间】：2012-01-20 15:18:51 【问题描述】：我在我的页面中插入了一个非常基本的谷歌地图，缩放控件和街道地图图标不可见，但是如果我将鼠标放在它们应该在的位置上，我可以缩放地图并进入街景。 所以控件在那里是不可见的。
<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);
任何想法可能是什么问题？
【问题讨论】：
Google Maps zoom control的可能重复 【参考方案1】：我有一个非常相似的问题，在我的情况下它不是 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
【讨论】：
【参考方案2】：我遇到了一个变种，有问题的 css 看起来像：
img
max-width: 100%;
max-height: 100%;
所以，需要另外一行：
#map_div img
max-width: none !important;
max-height: none !important;
【讨论】：
【参考方案3】：仅适用于 google map
的最佳解决方案.gmnoprint img
max-width: none;
【讨论】：
【参考方案4】：我遇到了这个问题，解决方法是包含这个 CSS ...
.gmnoprint img max-width: none;
CSS 选择器.gmnoprint img 获取 Google 地图 [gm] 控件上所有非打印 [noprint] 的图像 [img]。就我而言，max-width 已全局设置为 100%。取消设置可以解决问题。
【讨论】：
有时可能需要大锤：.gmnoprint img max-width: none !important;
对这个修复的测试者说一句鼓励的话：我准确地应用了它，但发现它不起作用。继续执行其他任务。最终，大约一天后，最终清理了我页面中 html 的其他问题——删除了一个额外的
，让我的容器都包含了正确的东西，yada yada——当我的工具像魔术一样时刚刚出现在下一页刷新。 html/css 世界是一个敏感的世界。保持冷静并继续编码。【参考方案5】：
请注意，目前甚至无法在触摸设备（ipad 等）上显示全尺寸缩放滑块。这是文档：
http://code.google.com/apis/maps/documentation/javascript/controls.html
google.maps.ZoomControlStyle.SMALL 显示一个迷你缩放控件，仅包含 + 和 - 按钮。这种风格适用于小地图。 在触摸设备上，此控件显示为响应触摸事件的 + 和 - 按钮。
google.maps.ZoomControlStyle.LARGE 显示标准缩放滑块控件。 在触摸设备上，此控件显示为响应触摸事件的 + 和 - 按钮。
【讨论】：
【参考方案6】：这绝对是您的代码遇到的 CSS 问题。寻找适用于所有图像的 CSS，例如：
img
max-width: 100%;
【讨论】：
谢谢，我有一个响应式页面布局，并按照Responsive Web Design 中的建议将最大图像宽度设置为 100%。我使用#map_container img max-width:none; 修复了它。
@skarE！你为我节省了很多时间。谢谢
在第一次搜索时，我没有在我的 css 中找到这样的代码，但我使用的是 Twitter Bootstrap 框架，它使用了这种流畅的图像调整。
是的，请注意所有 Twitter Bootstrap 用户！他们的 CSS 会导致这种情况。在引导 CSS 包含后的任何位置添加 .gmnoprint img max-width: none; （如 @Pete 所述）将解决此问题。
Zubr 基金会也这样做：/【参考方案7】：
我认为这可能是浏览器或您嵌入此地图的页面中的代码存在问题。
如果我查看这个简单的 hello world 代码，地图控件显示得很好。我将此地图地理编码到与您的样本相同的位置，因此它与该位置无关。
当您使用此示例时会发生什么？
<!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>
【讨论】：
以上是关于缩放控制和街景没有显示在我的 Google 地图上？的主要内容，如果未能解决你的问题，请参考以下文章