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

时间:2012-06-21 22:29:09

标签: google-maps

我已将谷歌地图集成到我的网站。我使用过谷歌地图API V3。当我的网站在手机(如Iphone)上观看时,地图变得无法使用。由于字体尺寸变得太小,很难看到,在进一步缩放到地图时,字体大小会进一步减小。

在桌面电脑上观看时,地图似乎可读,但我对字体大小仍不满意,在iphone或任何手机浏览器上都无法读取。

我想解决的是, 1)特别是通过增加字体大小,使地图看起来更大。 2)我希望我的地图只显示街道名称而不是其他内容。 3)我希望地图加载更快

或者是否有专门用于手机网站的其他谷歌地图API?

2 个答案:

答案 0 :(得分:14)

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

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

当我将此HTML代码段添加到“head”部分时,我的问题就消失了:

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

答案 1 :(得分:2)

  1. 这似乎是Google Maps API尚未支持的功能,或者未考虑这一功能
    this forum中的评论说明相同 显然街道标签“被烘焙到地图图块中”,因此无法实际更改字体大小/样式。
    Broken link #2 *

  2. 关于你的第二个问题:
    如果您只想显示街道标签,我建议您仔细阅读Styling section of the Google Maps API。完成本文档后,您会发现可以从向导Broken link #4 *轻松获取JSON,您可以将其添加到地图中。

    除了“道路”之外,您所要做的就是将所有功能标签Visibility设置为Off 然后点击“显示JSON”,你应该得到类似的东西:

  3. Google Maps API v3样式化地图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" }
      ]
     }
    ]
    
    向导还提供了

    Here is the static image of the resulting map

    <小时/>

    * FROM REVIEW:

    截至2017年,链接#2和#4已被破坏......