Css 缩放控制和街景不显示在我的谷歌地图上？_Css_Google Maps_Google Maps Api 3

Css 缩放控制和街景不显示在我的谷歌地图上？

css google-maps google-maps-api-3

Css 缩放控制和街景不显示在我的谷歌地图上？,css,google-maps,google-maps-api-3,Css,Google Maps,Google Maps Api 3,我在我的页面中插入了一个非常基本的谷歌地图，缩放控件和街景地图图标不可见，但是如果我将鼠标放在它们应该在的地方，我可以缩放地图并进入街景。因此，控件在那里只是不可见 <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false&region=IT"> </script> var myOptions = {

我在我的页面中插入了一个非常基本的谷歌地图，缩放控件和街景地图图标不可见，但是如果我将鼠标放在它们应该在的地方，我可以缩放地图并进入街景。因此，控件在那里只是不可见

<script type="text/javascript"
    src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false&region=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);


变量myOptions={
缩放：17，
中心：拉特林，
泛控制：对，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE
},
scaleControl：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；

你知道问题出在哪里吗

我认为这可能是浏览器或嵌入此地图的页面中的代码有问题

如果我看一下这个简单的hello world代码，maps控件会显示得很好。我把这张地图和你的样品放在同一个地方，所以它和这个地方没有任何关系

使用此示例时会发生什么情况

<!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&region=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>


html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：100%}
函数初始化（）{
var latlng=新的google.maps.latlng（45.38686,8.91927）；
变量myOptions={
缩放：17，
中心：拉特林，
泛控制：对，
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.LARGE
},
scaleControl：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
}

这肯定是您在代码中遇到的CSS问题。查找应用于所有图像的CSS，如：

img {
  max-width: 100%;
}

请注意，目前甚至不可能在触摸设备（ipad等）上显示全尺寸缩放滑块。以下是文档：

google.maps.ZoomControlStyle.SMALL显示一个仅由+和-按钮组成的迷你缩放控件。此样式适用于小地图在触摸设备上，此控件显示为+和-按钮，可响应触摸事件。

google.maps.ZoomControlStyle.LARGE显示标准缩放滑块控件在触摸设备上，此控件显示为+和-按钮，可响应触摸事件。

我遇到了此问题，解决方案是包含此CSS

.gmnoprint img { max-width: none; }

CSS选择器

.gmnoprint img

可以访问谷歌地图[gm]控件上非打印[noprint]的所有图像[img]。在我的例子中，

max width

已全局设置为100%。解决了这个问题。

只有谷歌地图才能找到的最佳解决方案

.gmnoprint img {
    max-width: none; 
}

我遇到了一个变体，令人不快的css看起来像：

img{
最大宽度：100%；
最大高度：100%；
}

我遇到了一个非常类似的问题，结果证明这不是CSS问题。在我的例子中，我们网站上的内容安全策略头阻止了某些图像的呈现。在本例中，它阻止了街景图像（从*.ggpht.com uri加载）和按钮图标，这些图像使用了使用data:scheme指定的内联svg数据。为了解决这个问题，我在内容安全策略头中添加了以下内容：

img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com

这是它的感谢，我有一个响应页面布局，并按照建议，在设置最大图像宽度为100%。我用

#map_容器img{max width:none；}

@skarE修复了它！你为我节省了很多时间。谢谢你在第一次搜索中，我没有在css中找到这样的代码，但我使用的是Twitter引导框架，它使用了这种流畅的图像调整。是的，请注意所有Twitter引导用户！他们的CSS会导致这种情况。添加<代码> .GMNopRunt IMG{Max宽：无；} <代码>（如@ Pete所述）在引导CSS包含之后将在哪里进行修改。ZuBr基金会也这样做：有时需要大锤：GMnoprim-img {最大宽度：没有！重要；} < /Cord>和一个鼓励这个测试的测试者的鼓励词：我精确地应用它，看到它不起作用。接着进行其他任务。最终，在一天左右的时间里，我终于解决了我页面中html的其他问题——删除了一个额外的，让我的容器都包含正确的东西，yada yada——就像魔术一样，我的工具在下一次页面刷新时出现了。html/css世界是一个敏感的世界；保持冷静，对可能重复的进行编码