手机浏览器网站上的谷歌地图太小了

Question

我已经将谷歌地图集成到我的网站上。我使用过谷歌地图API V3。当在手机（如 iPhone）上查看我的网站时，地图变得无法使用。很难看到，因为字体大小变得太小，在进一步放大地图时，字体大小会进一步减小。

在台式计算机中查看时，地图似乎是可读的，但我仍然对字体大小不满意，并且在iPhone或任何手机浏览器上完全无法读取。

我想解决的是，1）使地图看起来更大，特别是通过增加字体大小。2）我想让我的地图只显示街道名称，没有别的。3）我希望地图加载得更快

或者还有其他专门针对手机网站的谷歌地图 API？

Answer 1

我遇到了同样的问题，最终实现了我在这里找到的解决方案：https://sunpig.com/martin/2012/03/18/goldilocks-and-the-three-device-pixel-ratios/

基本上，本文探讨了物理像素和CSS"像素"之间的区别。两者之间存在比例因子。它在大多数移动浏览器上的默认值似乎是您经常看到为桌面设计的页面看起来非常"缩小"的原因，上面有微小的文本。而且它似乎也会导致谷歌地图不可读！

当我将此 HTML 片段添加到我的"头部"部分时，我的问题消失了：

<meta name="viewport" content="width=device-width">

Answer 2

1. 这似乎是Google Maps API尚不支持的功能，或者没有考虑到。
   
   本论坛的评论也相同。
   显然，街道标签被"烘焙到地图图块中"，因此无法实际更改字体大小/样式。
   断开的链接 #2*。

2. 关于你的第二个问题：
   如果您只想显示街道标签，我建议您通读Google Maps API的样式部分。完成本文档后，您会发现可以从向导断开的链接 #4* 轻松获取 JSON，您可以将其添加到地图中。
   
   您所要做的就是将所有功能标签"可见性"设置为"关闭"，但"道路"除外。
   然后单击"显示JSON"，您应该得到类似以下内容：

Google Maps API v3 Styled Maps JSON：

[
 {
  featureType: "administrative",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "landscape",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "poi",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "transit",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "water",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "road",
  stylers: [
   { visibility: "on" }
  ]
 }
]

下面是向导还提供的结果地图的静态图像。

---

* 来自评论：

截至 2017 年，链接 #2 和 #4 已断开......