2012-06-21 90 views
6

我已将谷歌地图集成到我的网站。我已经使用谷歌地图API V3。当我的网站在诸如Iphone等移动电话上查看时,地图变得无法使用。当字体尺寸变得太小时,很难看到,在进一步放大地图时,字体尺寸进一步减小。手机浏览器网站上的谷歌地图太小

在台式电脑上观看时,地图看起来很可读,但我仍然对字体大小不满意,并且在iPhone或任何手机浏览器上完全无法读取。

我想解决的是, 1)让地图看起来更大,特别是通过增加字体大小。 2)我想我的地图只显示街道名称,没有别的。 3)我想要地图加载速度更快

或者是否有任何其他谷歌地图API专门为手机网站?

回答

14

我有同样的问题,我结束了实施我在这里找到的解决方案:http://sunpig.com/martin/archives/2012/03/18/goldilocks-and-the-three-device-pixel-ratios.html

基本上文章探讨了物理像素和CSS“像素”之间的差异。两者之间有一个比例因子。它在大多数移动浏览器上的默认值似乎就是您经常看到为桌面设计的页面看起来非常“缩小”的原因,而手机上的文本很小。而且它似乎也会导致Google地图无法读取!

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

工作URL:http://web.archive.org/web/20130719230745/http://sunpig当我加入这个HTML片段到我的 “头” 部分

我的问题就走了。 COM /马丁/档案/ 2012/03/18 /金发和最三器件象素ratios.html – instead

2
  1. 看来这是谷歌地图API还不支持的功能,或者没有考虑到。

    this forum的意见相同。
    显然,街道标签是“烘焙到地图瓷砖”,所以没有办法实际改变字体大小/样式。
    Broken link #2 *。

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

    您只需将除“道路”以外的所有功能标签可见性设置为关闭即可。
    然后点击 “显示JSON”,你应该得到与此类似:

谷歌地图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导读:

截至2017年,链接#2,#4被打破......