谷歌地图 API 不显示缩放按钮、街景或全屏图标?

Question

带有自定义标记、信息窗口和样式的地图屏幕截图

问题：

• 对谷歌地图API感到困扰。
• 我只是去自定义标记，并编辑弹出信息 窗口文本，然后缩放按钮的图标消失， 街景和全屏。

审理的案件 ：

• 我尝试删除所有 CSS 除了 需要渲染地图。我尝试了这些CSS提示看起来像类似的问题：

  • 缩放控件和街景未显示在我的谷歌地图上？

• 我还尝试删除用于标记和信息窗口的所有代码。谷歌按钮仍然保持空白。它们都可以工作(缩放、街景和全屏(，但它们是空白的，不适合我的目的。

Answer 1

我们发现我们有一个针对我们网站上所有元素的框大小 CSS 规则：

* {box-sizing: border-box;}

为了解决图标显示问题，我们添加了一个针对谷歌地图内所有元素的类，以将框大小更改为内容框。

.gmaps * {box-sizing: content-box;} 

这为我们解决了问题。

Answer 2

您需要将版本更新到以下版本

<script src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=YOUR_API_KEY&callback=initMap"></script>     

Answer 3

除了TFOH的回答外，请确保从嵌入式Google地图中显示的任何img标签中删除任何最大宽度。我遇到了街景图标无法显示的问题，因为我已将图像设置为 max-with： 100%，以便图像与其原始大小保持比例。

img {height: auto, max-width: 100%}
.gmaps * {box-sizing: content-box;} .gmaps img {max-width: none;}

Answer 4

想再添加一个答案，因为现有的答案都没有真正帮助我。希望它对像我这样的问题有问题的其他人有用。

就我而言，问题出在我用来包装谷歌地图div 的组件中。 该组件具有缩放动画，可更改比例道具。这不知何故使地图变得疯狂，缩放控件不可见(不在视图中(。

所以在我的情况下，解决方案是删除该动画，无论如何我都不需要。另一种解决方案可能是延迟地图显示，直到动画结束。

具体来说，我在 Ant Design 的弹出式组件中遇到了这个问题，其中地图显示在弹出窗口中。要解决它，您可以这样做：

<Popover
content={<YourMapComponent />}
transitionName="" // <--- disable transition
>
Hover me
</Popover>