8

我已将谷歌地图集成到我的网站。我使用了谷歌地图 API V3。在 Iphone 等手机上查看我的网站时，地图将无法使用。由于字体变得太小，很难看到，进一步放大地图时，字体大小会进一步减小。

在台式电脑上查看时，地图似乎可读，但我仍然对字体大小不满意，而且在 iphone 或任何手机浏览器上完全不可读。

我想解决的是，1）让地图看起来更大，尤其是通过增加字体大小。2）我想在我的地图上只显示街道名称而不是其他任何东西。3）我希望地图加载速度更快

或者有没有其他专门用于手机网站的谷歌地图API？

4

2 回答 2

16

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

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

当我将此 HTML 片段添加到我的“head”部分时，我的问题就消失了：

<meta name="viewport" content="width=device-width">
于 2012-11-13T01:20:29.900 回答
2

  1. 似乎这是 Google Maps API 尚不支持或未考虑到的功能。这个论坛

    的评论也是一样的。 显然街道标签被“烘焙到地图图块中”，因此无法实际更改字体大小/样式。断开的链接 #2 *。

  2. 关于您的第二个问题：
    如果您只想显示街道标签，我建议您通读Google Maps API 的样式部分。浏览完此文档后，您会发现可以从向导Broken link #4 * 轻松获取 JSON，您可以将其添加到地图中。

    您所要做的就是将所有特征标签 Visibility 设置为 Off，“Road”除外。
    然后点击“Show 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 已损坏...

于 2012-06-22T00:26:10.973 回答