2012-06-21 128 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被打破......